Array Table

<template>
  <v-row no-gutters>
    <v-col lg="8" md="12" sm="12">
      <va-array-table-input source="employeeChildren" :title="$t('resources.employees.fields.employeeChildren')" primary-key="childId" :headers="headers" :fields="fields" :generate-uid="true">
       <template v-slot: field>
         <va-text-input :key="field.source" v-model="employeeChildrenForm.childName" variant="outlined" :error-messages="childNameErrors" clearable>
         </va-text-input>
       </template>
       <template v-slot: field>
         <va-date-input :key="field.source" v-model="employeeChildrenForm.childBirthdate" variant="outlined" :error-messages="childBirthdateErrors">
         </va-date-input>
       </template>
      </va-array-table-input>
    </v-col>
  </v-row>
</template>

<script>
import { useVuelidate } from "@vuelidate/core";
import { required, maxLength, numeric } from "@vuelidate/validators";
import Utils from "vuetify-admin/src/mixins/utils";
import Resource from "vuetify-admin/src/mixins/resource";
import { provide } from 'vue'

export default {
  props: ["id", "item"],
  mixins: [Utils, Resource],
  setup() {
    let vuelidate = useVuelidate();
    provide('v$', vuelidate)
    return { v$: vuelidate }
  },
  data() {
    return {
      model: {
        id: null,
        employeeChildren: null,
      },
      employeeChildrenHeaders: [
        { key: "childName", width: "40%" },
        { key: "childBirthdate", width: "40%" },
        { key: "actions" },
      ],
      employeeChildrenFields: [
        {
          source: "childName",
          type: "text",
        },
        {
          source: "childBirthdate",
          type: "date",
        },
      ]
    };
  },
  validations() {
    return {
      // model: {},
      employeeChildrenForm: {
        childName: {
          required,
        },
        childBirthdate: {
          required,
        }
      }
    }
  },
  created() {
    this.model.id = this.generateId(this);
  },
  computed: {
    employeeChildrenForm: {
      get() {
        return this.$store.getters[`${this.resource}/getRow`];
      },
      set(val) {
        this.$store.commit(`${this.resource}/setRow`, val);
      } 
    },
    childNameErrors() {
      const errors = [];
      const field = "childName";
      if (!this.v$["employeeChildrenForm"][field].$dirty) return errors;
      this.v$["employeeChildrenForm"][field].required.$invalid &&
        errors.push(this.$t("v.text.required"));
      return errors;
    },
    childBirthdateErrors() {
      const errors = [];
      const field = "childBirthdate";
      if (!this.v$["employeeChildrenForm"][field].$dirty) return errors;
      this.v$["employeeChildrenForm"][field].required.$invalid &&
        errors.push(this.$t("v.text.required"));
      return errors;
    },
  },
}
</script>