Why does vee-validate in a modal window not work correctly?

Question

Vue.js

There is an order form with 3 fields that opens in a modal window. I use vee-validate for validation. It is worth putting the focus in at least one of the fields, as all 3 fields have errors at once. I tried to insert the form not in the modal, everything works fine. How to set up validation?

<transition name="modal">

    <main class="builder-order-form">
      <form @submit.prevent="validateBeforeSubmit" name="builderOrder">

        <label class="builder-order-form__label form__label" for="builderOrderName">
          <span v-if="errors.has('builderOrderName')">{{ errors.first('builderOrderName') }}</span>
          <span v-else>ваше имя</span>
        </label>
        <input
          v-validate.disabled data-vv-rules="required"
          v-model="name"
          name="builderOrderName"
          type="text"
          class="builder-order-form__input form__input"
          id="builderOrderName"
          data-vv-as="builderOrderName"
          data-vv-scope="builderOrder"
          data-vv-name="builderOrderName"/>

        <label class="builder-order-form__label form__label" for="builderOrderPhone">
          <span v-if="errors.has('builderOrderPhone')">{{ errors.first('builderOrderPhone') }}</span>
          <span v-else>номер телефона</span>
        </label>
        <the-mask
          @blur.native="$validator.validate('builderOrderPhone')"
          v-validate.disabled data-vv-rules="length:10|required"
          name="builderOrderPhone"
          id="builderOrderPhone"
          class="builder-order-form__input form__input"
          type="tel"
          mask="+7 (PNN) NNN-NN-NN"
          :tokens="phoneToken"
          v-model="phone"
          data-vv-as="builderOrderPhone"
          data-vv-scope="builderOrder"
          data-vv-name="builderOrderPhone"/>

        <p v-if="phone && phone.length === 10" class="builder-order-form__phone-msg">
          Пожалуйста, проверьте правильность введенного номера
        </p>

        <label class="builder-order-form__label form__label" for="builderOrderEmail">
          <span v-if="errors.has('builderOrderEmail')">{{ errors.first('builderOrderEmail') }}</span>
          <span v-else>e-mail</span>
        </label>
        <input
          v-validate.disabled data-vv-rules="email|required"
          v-model="email"
          class="builder-order-form__input form__input"
          type="email"
          name="builderOrderEmail"
          id="builderOrderEmail"
          data-vv-as="builderOrderEmail"
          data-vv-scope="builderOrder"
          data-vv-name="builderOrderEmail" />

        <button  type="submit">Отправить</button>
      </form>
    </main>
  </transition>