context

I'm working with a field list where need through the edit button, go to a modal to edit or add a new field for this list.(I'm using vue and vuetify)

I'm having problems with the modal when I try to validate a name of these fields don't pass if go blank (v-text-field).

My form (image1), When I press add field, the response in console is undefined independing if the field is blank or not.

Here part of my code

I did the global import

import Vue from "vue";
import { ValidationObserver, ValidationProvider, extend } from 'vee-validate'
import { required } from 'vee-validate/dist/rules'

extend('required', required)
Vue.component('ValidationProvider', ValidationProvider);
Vue.component('ValidationObserver', ValidationObserver)

Here is my component code https://codepen.io/fmoraless/pen/NWXvKLQ The main section is where is validation tags of vee-validate in template.

template section

<validation-observer ref="v-card">
      ...
      ...
          <v-col cols="12" :md="6">

              <validation-provider
                  v-slot="{ errors, validate }"
                  vid="label"
                  :rules="{ required: true }"
              >
                <v-text-field
                  v-model="field.label"
                  :label="$t('Label')"
                  :placeholder="$t('Please enter a label')"
                  hide-details="auto"
                  filled
                  dense
              >
                </v-text-field>
              </validation-provider>

          </v-col>
         ...
       ....
    </validation-observer>

script section

    <script>
import {field_types, payment_methods} from "../../helpers/options";
import {widthExtraSmallDialog as width} from '../../helpers/responsive';
import { bus } from "../../app";
import { Field, validate } from 'vee-validate';

export default {
  name: "MilestoneFieldsEdit",
  data () {
    return {
      visible: false,
      index: null,
      field: {
        mobile_activity_id: 1,
        label: "",
        is_required: true,
        dynamic_cols: [],
        sort: 1,
        _destroy: false
      },
       ....
    }
  },
  created() {
    ....
  },
  computed: {
    ...
  },
  watch: {
   .....,
  },
  methods: {
    ...
    async handleAdd() {
      try {
        await this.$refs.form.validate()
        $this.$emit("add", {
          ...this.field,
          sort: this.index + 1,
        });
        this.$emit("close");
        this.handleReset();

      } catch ({response}) {
        console.log('response', {response})
        if ({response} == undefined) {
          this.$refs.form.setErrors(response.data.errors)
        }
      }
    }

expected results

See a validation message after press add new field.

code

Here mi code pen with extended components

If you can give tips or hint to resolve, I really appreciate it