TypeError: Cannot read properties of undefined (reading 'required') at eval (validator-v2.vue?8194:311:1)

Question

In my laravel and vue js application I have following vuejs to display a modal and insert some data

<template>
  <div>
    <modal-md :identifier="identifier" :has-multiple-actions="false">
      <template slot="modal_title">
        <div
          class="
            flex
            justify-between
            items-center
            border-b border-certstyle-border
            px-10
            py-3
          "
        >
          <h3
            class="
              text-2xl
              leading-10
              text-certstyle-titles
              font-bold
              my-2
              flex
              items-center
            "
          >
            <span
              class="border-l-2 border-certstyle-orange inline-block h-6 mr-2"
            ></span>
            <span>Add document</span>
          </h3>
          <div
            class="
              h-full
              flex
              items-center
              cs--reveal
              transition-all
              duration-500
            "
          ></div>
        </div>
      </template>
      <template slot="modal_content">
        <!--Modal content-->
        <div
          class="bg-certstyle-background-light w-full h-full px-10 pt-8 pb-10"
        >
          <!--Name-->
          <div class="mb-5 relative z-30">
            <p class="text-certstyle-titles font-bold text-sm mb-1">Name</p>
            <validator-v2
              identifier="addDocument"
              name="add_name_input"
              selector="id"
            ></validator-v2>
            <input
              id="add_name_input"
              v-model="documentName"
              name="name"
              type="text"
              class="form-input w-full relative z-10"
            />
          </div>

          <div class="flex justify-between">
            <!--Completed at-->
            <div class="w-1/2 mr-2">
              <p class="text-certstyle-titles font-bold text-sm mb-1">
                Date of issue
              </p>
              <validator-v2
                identifier="addDocument"
                name="issued_at"
                :rules="{ required: { message: 'Date of issue is required.' } }"
              >
                <div class="h-12">
                  <cs-date-picker
                    id="minimumDate"
                    v-model="dateOfIssue"
                    :default-selection="true"
                    name="issued_at"
                  >
                  </cs-date-picker>
                </div>
              </validator-v2>
            </div>

            <!--Expiration date-->
            <div class="w-1/2 ml-2">
              <p class="text-certstyle-titles font-bold text-sm mb-1">
                Expiry date
              </p>
              <validator-v2
                identifier="addDocument"
                name="expires_at"
                depends-on-name="does_not_expire"
                :rules="{ required: { message: 'Expiry date is required.' } }"
              >
                <div class="h-12">
                  <cs-date-picker
                    id="maximumDate"
                    v-model="expiryDate"
                    :default-selection="true"
                    :disable="doesNotExpire"
                    name="expires_at"
                  >
                  </cs-date-picker>
                </div>
              </validator-v2>
            </div>
          </div>
          <div class="flex justify-between">
            <!--Completed at-->
            <div class="w-1/2 mr-2">
              <div class="mb-4">
                <label
                  class="
                    inline-flex
                    items-center
                    focus:outline-none
                    checkbox--container
                    mt-2
                  "
                >
                  <input
                    v-model="doesNotExpire"
                    type="checkbox"
                    name="does_not_expire"
                  />
                  <span
                    class="checkbox--checkmark flex items-center justify-center"
                  >
                    <svg
                      class="icon text-certstyle-orange feather feather-check"
                      xmlns="http://www.w3.org/2000/svg"
                      width="16"
                      height="16"
                      viewBox="0 0 24 24"
                      fill="none"
                      stroke="currentColor"
                      stroke-width="2"
                      stroke-linecap="round"
                      stroke-linejoin="round"
                    >
                      <polyline points="20 6 9 17 4 12"></polyline>
                    </svg>
                  </span>
                  <span
                    style="bottom: 4px"
                    class="text-certstyle-text font-normal text-sm relative"
                    >This document does not expire</span
                  >
                </label>
              </div>
            </div>
          </div>

          <!--Upload document-->
          <div class="mb-1">
            <dashboard-input-label
              identifier="document"
              :settings="{ help: true, helpDirection: 'left' }"
            >
              Upload document
              <template slot="helpText">
                Maximum filesize is 5 MB. The default allowed file extensions
                are: pdf, jpeg and png.
              </template>
            </dashboard-input-label>
            <validator-v2
              :identifier="identifier"
              name="document_file"
              :rules="{ required: { message: 'Document is required.' } }"
            >
              <custom-file-upload
                ref="documentDocument"
                v-model="documentFile"
                :max-upload-file-size="5"
                name="document_file"
              ></custom-file-upload>
            </validator-v2>
          </div>

          <!--Document number-->
          <div class="mb-1">
            <p
              class="inline-block text-certstyle-titles font-bold text-sm mb-1"
            >
              Document Number
            </p>
            <div class="relative">
              <input
                id="add_document_number_input"
                v-model="documentNumber"
                name="document_number"
                :disabled="doesNotHaveDocumentNumber"
                type="text"
                class="form-input w-full relative z-10"
              />
              <input-annotation identifier="document_number">
                Fill in your document number here.
                <span class="font-bold"> Note!</span>
                Use the document number mentioned on the qualification you
                upload. Don\'t use your WINDA-ID.
              </input-annotation>
              <label
                class="
                  inline-flex
                  items-center
                  focus:outline-none
                  checkbox--container
                  mt-2
                "
              >
                <input
                  v-model="doesNotHaveDocumentNumber"
                  type="checkbox"
                  name="no_document_number"
                />
                <span
                  class="checkbox--checkmark flex items-center justify-center"
                >
                  <svg
                    class="icon text-certstyle-orange feather feather-check"
                    xmlns="http://www.w3.org/2000/svg"
                    width="16"
                    height="16"
                    viewBox="0 0 24 24"
                    fill="none"
                    stroke="currentColor"
                    stroke-width="2"
                    stroke-linecap="round"
                    stroke-linejoin="round"
                  >
                    <polyline points="20 6 9 17 4 12"></polyline>
                  </svg>
                </span>
                <span
                  style="bottom: 4px"
                  class="text-certstyle-text font-normal text-sm relative"
                >
                  This document has no document number.
                </span>
              </label>
            </div>
          </div>
        </div>
      </template>
      <template slot="modal_actions">
        <div class="flex items-center justify-between space-x-4">
          <disables-submit-on-errors
            :identifier="identifier"
            @proceed="addNewDocument"
          >
            <loading-button ref="submitBtnSave" size="normal">
              Save & Close
            </loading-button>
          </disables-submit-on-errors>
          <disables-submit-on-errors
            :identifier="identifier"
            @proceed="storeDocumentAndAddNew"
          >
            <loading-button ref="submitBtn" size="normal">
              Save & Add new
            </loading-button>
          </disables-submit-on-errors>
        </div>
      </template>
    </modal-md>
    <div class="flex flex-col fixed top-0 right-0 z-50">
      <toastr-alert
        v-if="message !== ''"
        :message="message"
        :type="type"
        @hidden="resetToastrMessage"
      >
      </toastr-alert>
    </div>
  </div>
</template>

<script>
import ModalMd from '@/components/dashboard/sharedComponents/modals/modal-md'
import CheckboxWarning from '@/components/inputs/checkbox-warning/checkbox-warning'
import CsDataPicker from '@/components/inputs/cs-data-picker/cs-data-picker'
import HasToastrMessage from '@/Mixins/HasToastrMessage'
import Helper from '@/Support/Helper'

const url = window.location.href
const url_split = url.split('/')
const emp_id_location = url_split.length - 2
const emp_id = url_split[emp_id_location]

export default {
  name: 'AddDocument',

  components: { CsDataPicker, CheckboxWarning, ModalMd },

  mixins: [HasToastrMessage],

  props: ['identifier', 'selectedDocumentId'],

  data() {
    return {
      documentId: null,
      documentName: null,
      dateOfIssue: null,
      expiryDate: null,
      documentNumber: null,
      doesNotHaveDocumentNumber: false,
      doesNotExpire: false,
      documentFile: null,
      doesOptIn: false,
      isAddNew: false,
    }
  },

  watch: {
    doesNotHaveDocumentNumber() {
      if (this.doesNotHaveDocumentNumber) {
        this.documentNumber = null
      }
    },
  },

  mounted() {
    if (this.selectedDocumentId) {
      this.documentId = this.selectedDocumentId
    }
  },

  methods: {
    addDocument(documentId) {
      this.documentId = documentId
    },

    storeDocumentAndAddNew() {
      this.isAddNew = true
      const loader = this.$refs.submitBtn
      this.storeDocument(loader)
    },

    addNewDocument() {
      const loader = this.$refs.submitBtnSave
      this.storeDocument(loader)
    },

    storeDocument(loader) {
      loader.startLoading()

      if (!this.documentNumber && !this.doesNotHaveDocumentNumber) {
        this.showToastrErrorMessage(
          'Document number is required unless you confirm it does not apply'
        )
        loader.stopLoading()
        return
      }

      if (!this.expiryDate && !this.doesNotExpire) {
        this.showToastrErrorMessage(
          'Expiry date is required unless you confirm it does not apply'
        )
        loader.stopLoading()
        return
      }

      const formData = new FormData()
      formData.append('emp_id', emp_id)
      formData.append('name', this.documentId)
      // formData.append('name', this.documentName)
      formData.append(
        'issued_at',
        moment(this.dateOfIssue).format('DD-MM-YYYY')
      )
      formData.append(
        'expires_at',
        moment(this.expiryDate).format('DD-MM-YYYY')
      )
      formData.append(
        'document_number',
        !this.doesNotHaveDocumentNumber ? this.documentNumber : null
      )

      if (this.doesNotExpire) {
        formData.append('does_not_expire', this.doesNotExpire)
      }

      formData.append('opt_in', this.doesOptIn)
      formData.append('document_file', this.$refs.documentDocument.file)

      this.$store
        .dispatch('addDocument', formData)
        .then((data) => {
          this.showToastrSuccessMessage('Document added successfully')

          if (!this.isAddNew) {
            eventsHub.$emit(`overlay:close:${this.identifier}`)
          }

          this.reset()
          this.$emit('created')
        })
        .catch((error) => {
          if (
            Helper.isset(error.response.data) &&
            Helper.isset(error.response.data.errors)
          ) {
            collect(error.response.data.errors).each((error) => {
              this.showToastrErrorMessage(error[0])
            })
          }
        })
        .finally(() => {
          loader.stopLoading()
        })
    },

    reset() {
      this.documentNumber = null
      this.doesNotHaveDocumentNumber = false
      this.doesNotExpire = false
      this.documentFile = null
      this.doesOptIn = false
      this.isAddNew = false
    },
  },
}
</script>

But when I try to run this, it shows me an console error saying

TypeError: Cannot read properties of undefined (reading 'required')

And when I click on the submit button, it just start to show the loading spinner without submitting the form.

What's the mistake I'm doing here?