Erro de elemento personalizado Vue com componente ValidationObserver vee-validate

Question

Estou tentando usar vee-validatepara validar algumas entradas neste aplicativo. Ao tentar usar a ValidationObservertag personalizada, recebo este erro.

[Vue warning]: Elemento customizado desconhecido: <ValidationObserver>- você registrou o componente corretamente? Para componentes recursivos, certifique-se de fornecer a opção "nome".

Eu o adiciono aos componentes na <script>seção do elemento .vue.

    <script>
    import { ValidationObserver } from 'vee-validate';
    import { mapState, mapGetters, mapActions } from 'vuex';

    export default {
      data: () => ({
        name: 'ValidationObserver',
        components: {
          ValidationObserver,
        },
    // code continues on from here

Caso fosse necessário, também incluí nos componentes do meu main.jsarquivo onde o aplicativo Vue é criado. Não corrigiu o erro.

Answer 1

a opção de componentes deve estar fora da opção de dados:

export default {
  data: () => ({
    name: 'ValidationObserver',
  }),
 components: {
      ValidationObserver,
    },