title: vee validate "required" validation is working only when on change of the field
body: <p>Below is my code. Three fields are there in my form. Firstname, Middlename, Lastname. All these fields are set as required one. Only difference is that "Firstname &amp; Lastname" contains input tag, but "Middlename" contains b-form-input tag. Actually my problem is, When I focus out(blur) these("Firstname &amp; Lastname") fields it throws an required error but when I do the same for ("Middlename") field it doesn't <a href="https://i.stack.imgur.com/jUTUN.png" rel="nofollow noreferrer">Image1</a>. I have to enter the value in that ("Middlename") field <a href="https://i.stack.imgur.com/gTVum.png" rel="nofollow noreferrer">Image2</a> ,then I removed the value it's throwing error
  <a href="https://i.stack.imgur.com/19DFB.png" rel="nofollow noreferrer">Image3</a> i.e. required validation is only working "on change" of the "("Middlename") field. What is the reason for this?</p>
  
  <pre><code>&lt;template&gt;
   &lt;b-card&gt;
      &lt;h4 slot="header" class="card-title"&gt;Employee&lt;/h4&gt;
          &lt;b-row&gt;
              &lt;b-col sm="3"&gt;
                &lt;b-form-group&gt;
                  &lt;label for="name"&gt;First Name &lt;/label&gt;
                  &lt;input type="text" id=""  class="form-control" placeholder="Enter your name" v-validate="'required'" name="Firstname"&gt;
                          &lt;span v-show="errors.has('Firstname')" class="is-danger"&gt;{{ errors.first('Firstname') }}&lt;/span&gt;
                 &lt;/b-form-group&gt;
              &lt;/b-col&gt;
              &lt;b-col sm="3"&gt;
                &lt;b-form-group&gt;
                  &lt;label for="name"&gt;Middle Name &lt;/label&gt;
                  &lt;b-form-input type="text" id=""  class="form-control" placeholder="Enter your name" v-validate="'required'" name="Middlename"&gt; &lt;/b-form-input&gt;
                    &lt;span v-show="errors.has('Middlename')" class="help is-danger"&gt;{{ errors.first('Middlename') }}&lt;/span&gt;
                &lt;/b-form-group&gt;
              &lt;/b-col&gt;
               &lt;b-col sm="3"&gt;
                &lt;b-form-group&gt;
                  &lt;label for="name"&gt;Last Name &lt;/label&gt;
                  &lt;input type="text" id=""  class="form-control" placeholder="Enter your middle name" v-validate="'required|Name'" name="Lastname"&gt;
                          &lt;span v-show="errors.has('Lastname')" class="help is-danger"&gt;{{ errors.first('Lastname') }}&lt;/span&gt;
                &lt;/b-form-group&gt;
              &lt;/b-col&gt;
          &lt;/b-row&gt;
          &lt;input type="submit" value="Submit" @click="validateForm"&gt;
   &lt;/b-card&gt;
  &lt;/template&gt;
  
  &lt;script&gt;
  import Vue from 'vue'
  import VeeValidate from 'vee-validate';
  Vue.use(VeeValidate);
  
  export default {
    name: 'addEmpl',
     created: function() {
      this.$validator.extend('Name', {
      getMessage: field =&gt; '* Enter valid ' + field + '',
      validate: value =&gt; /^[a-zA-Z]*$/.test(value)
      });
  }
  }
  &lt;/script&gt;
  
  &lt;style lang="scss" scoped&gt;
  .is-danger{
    color:  RED;
  }
  &lt;/style&gt;
  </code></pre>