vue.js - vee validate "required" 検証は、フィールドの変更時にのみ機能します

Question

以下は私のコードです。私のフォームには 3 つのフィールドがあります。ファーストネーム、ミドルネーム、ラストネーム。これらのフィールドはすべて必須フィールドとして設定されています。唯一の違いは、"Firstname & Lastname" には input タグが含まれていますが、"Middlename" には b-form-input タグが含まれていることです。実際、私の問題は、これらの("Firstname & Lastname")フィールドにフォーカスを当てる(ぼかし)と、必要なエラーがスローされますが、("Middlename")フィールドに同じことをすると、 Image1 ではありません。その ("Middlename") フィールド Image2 に値を入力する必要があります。次に、エラー Image3をスローしている値を削除しました。つまり、必要な検証は "("Middlename") フィールドの「変更時」にのみ機能します。その理由は何ですか?これ？

<template>
 <b-card>
    <h4 slot="header" class="card-title">Employee</h4>
        <b-row>
            <b-col sm="3">
              <b-form-group>
                <label for="name">First Name </label>
                <input type="text" id=""  class="form-control" placeholder="Enter your name" v-validate="'required'" name="Firstname">
                        <span v-show="errors.has('Firstname')" class="is-danger">{{ errors.first('Firstname') }}</span>
               </b-form-group>
            </b-col>
            <b-col sm="3">
              <b-form-group>
                <label for="name">Middle Name </label>
                <b-form-input type="text" id=""  class="form-control" placeholder="Enter your name" v-validate="'required'" name="Middlename"> </b-form-input>
                  <span v-show="errors.has('Middlename')" class="help is-danger">{{ errors.first('Middlename') }}</span>
              </b-form-group>
            </b-col>
             <b-col sm="3">
              <b-form-group>
                <label for="name">Last Name </label>
                <input type="text" id=""  class="form-control" placeholder="Enter your middle name" v-validate="'required|Name'" name="Lastname">
                        <span v-show="errors.has('Lastname')" class="help is-danger">{{ errors.first('Lastname') }}</span>
              </b-form-group>
            </b-col>
        </b-row>
        <input type="submit" value="Submit" @click="validateForm">
 </b-card>
</template>

<script>
import Vue from 'vue'
import VeeValidate from 'vee-validate';
Vue.use(VeeValidate);

export default {
  name: 'addEmpl',
   created: function() {
    this.$validator.extend('Name', {
    getMessage: field => '* Enter valid ' + field + '',
    validate: value => /^[a-zA-Z]*$/.test(value)
    });
}
}
</script>

<style lang="scss" scoped>
.is-danger{
  color:  RED;
}
</style>