Остальные компоненты админки

 data() {
   return {
     record: {
       phone: '',
     },

<template>
  <div>
    <b-modal
      id="modal-prevent-closing"
      ref="modal"
      title="Заказать обратный звонок"
      centered
      @show="resetModal"
      @hidden="resetModal"
      @ok="handleOk"
    >
      <form ref="form" @submit.stop.prevent="handleSubmit">
        <b-form-group label="Имя" label-for="name-input" invalid-feedback="Имя обязательно" :state="nameState">
          <b-form-input id="name-input" v-model="name" :state="nameState" required></b-form-input>
        </b-form-group>

        <b-form-group>
          <vesp-input-text-mask
            v-model="record.phone"
            mask="+7 (XXX) XXX-XX-XX"
            placeholder-char="X"
            :state="!record.phone ? null : record.phone.length === 12"
            :format-value="(value) => value.replaceAll(/[^\d+]/g, '')"
          />
          <!-- <vesp-input-color-picker v-model="record.color" /> -->
        </b-form-group>
      </form>
    </b-modal>
  </div>
</template>

<script>
export default {
  data() {
    return {
      name: '',
      nameState: null,
      submittedNames: [],
      record: {
        phone: '',
      },
    }
  },
  methods: {
    checkFormValidity() {
      const valid = this.$refs.form.checkValidity()
      this.nameState = valid
      return valid
    },
    resetModal() {
      this.name = ''
      this.nameState = null
    },
    handleOk(bvModalEvent) {
      // Предотвратить закрытие модального окна
      bvModalEvent.preventDefault()
      // Обработчик отправки триггера
      this.handleSubmit()
    },
    handleSubmit() {
      // Выйти, если форма недействительна
      if (!this.checkFormValidity()) {
        return
      }
      // Вставьте имя в представленные имена
      this.submittedNames.push(this.name)
      // Скрыть модальное окно вручную
      this.$nextTick(() => {
        this.$bvModal.hide('modal-prevent-closing')
      })
    },
  },
}
</script>

<vesp-input-text-mask mask="+7 (XXX) XXX-XX-XX" placeholder-char="X" format-value="function formatValue(value){return value.replaceAll(/[^\d+]/g,&quot;&quot;);}"></vesp-input-text-mask>