How can i use vuelidate in Form.vue provider ?

[eguvenc]

Hi is there anybody tried to use vuelidate in Form.vue ?

in Form.vue

i want you use vuelidate instead of form validate, how can i do this ?
I printed console log content of th $this.v but its undefined.

async save(redirect) {
      // if (!this.$refs.form.validate()) {
      //   return;
      // }
      this.$v.$touch();   // Here i use $this.v  but its undefined
      if (!this.$v.$invalid) {
        return;
      }
   }

Full file

<script>
import Resource from "../../../mixins/resource";
import set from "lodash/set";
import useVuelidate from '@vuelidate/core'

/**
 * Form component which handle resource saving by calling `create` or `update` data provider methods.
 * It's the better place for made heavy usage of any VA inputs.
 * Use injection which allowing unique global v-model for all inputs.
 */
export default {
  mixins: [Resource],
  provide() {
    return {
      formState: this.formState,
    };
  },
  setup () {
    return { v$: useVuelidate() }
  },
  props: {},
  data() {
    return {
      originalValue: this.value,
      formState: {
        edit: !!this.id,
        item: this.item,
        model: {},
        saving: false,
        errors: {},
        update: ({ source, value }) => {
          let model = { ...this.formState.model };
          set(model, source, value);

          this.formState.model = model;

          /**
           * Send model update, called after each single input change.
           */
          this.$emit("input", model);
        },
        submit: (redirect) => {
          this.save(redirect);
        },
      },
    };
  },
  watch: {
    item(val) {
      if (!val) {
        this.formState.model = this.originalValue;
      }
      this.formState.item = val;
    },
    value: {
      handler(val) {
        if (val) {
          this.formState.model = val;
        }
      },
      deep: true,
      immediate: true,
    },
  },
  methods: {
    onSubmit() {
      if (this.disableRedirect) {
        this.save();
        return;
      }
      this.save(this.redirect);
    },
    async save(redirect) {
      // if (!this.$refs.form.validate()) {
      //   return;
      // }
      this.$v.$touch();   // Here i use $this.v  but its undefined
      if (!this.$v.$invalid) {
        return;
      }
      /**
       * Set saving to childs.
       */
      this.formState.saving = true;
      
      try {
        let { data } = this.id
          ? await this.$store.dispatch(`${this.resource}/update`, {
              id: this.id,
              data: this.formState.model,
            })
          : await this.$store.dispatch(`${this.resource}/create`, {
              data: this.formState.model,
            });

        this.formState.errors = {};

        /**
         * Sent after success saving.
         */
        this.$emit("saved");

        switch (redirect) {
          case "list":
            this.$router.push({ name: `${this.resource}_list` });
            break;
          case "create":
            // Reset form in case of same route
            this.formState.item = null;
            this.formState.model = this.originalValue;

            this.$router.push({ name: `${this.resource}_create` });
            break;
          case "show":
            this.$router.push({
              name: `${this.resource}_show`,
              params: { id: data.id },
            });
            break;
          case "edit":
            this.$router.push({
              name: `${this.resource}_edit`,
              params: { id: data.id },
            });
            break;
        }
      } catch (e) {
        if (e.errors) {
          this.formState.errors = e.errors;
        }
      } finally {
        this.formState.saving = false;
      }
    },
  },
};
</script>