Vue custom element error with vee-validate ValidationObserver component

Question

I'm trying to use vee-validate to validate some inputs on this app. When trying to use the ValidationObserver custom tag I am getting this error.

[Vue warn]: Unknown custom element: <ValidationObserver> - did you register the component correctly? For recursive components, make sure to provide the "name" option.

I add it to the components in the <script> section of the .vue element.

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

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

In case it was necessary, I also included it in the components in my main.js file where the Vue app is created. It did not fix the error.

Answer 1

the components option should be outside the data option :

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