title: vuelidate not working as expected on blur
body: <p>I am using vuelidate to validate my form. I want to validate the user input once user moved to the next input field or click out side of the current input field.</p>
  <pre><code>  &lt;div class=&quot;form-group col-md-6&quot; :class=&quot;{invalid: $v.partner.email.$error}&quot;&gt;
       &lt;label for=&quot;EmailAddress&quot; class=&quot;control-label&quot;&gt;Email Address&lt;/label&gt;
       &lt;input class=&quot;form-control&quot; v-model=&quot;$v.partner.email.$model&quot; @blur.native=&quot;$v.partner.email.$touch()&quot; :class=&quot;{'is-invalid':$v.partner.email.$error, 'is-valid':!$v.partner.email.$invalid}&quot;/&gt;
       &lt;div class=&quot;invalid-feedback&quot;&gt;
           &lt;span v-if=&quot;!$v.partner.email.required&quot;&gt;please enter a valid email address&lt;/span&gt;
           &lt;span v-if=&quot;!$v.partner.email.email&quot;&gt;please enter a valid email address&lt;/span&gt;
       &lt;/div&gt;
    &lt;/div&gt;
  
  validations: {
    partner: {
      email: { required, email },
    }
  },
  methods: {
    beforeSave() {
      event.preventDefault();
      if (this.$v.$invalid) {
        alert(&quot;Error&quot;);
      } else {
        this.save();
      }
    }
  }
  </code></pre>
  <p>Currently validation happens only if user type something on another input field. Otherwise it shows the error message even user type a correct email.</p>
  <p><a href="https://i.stack.imgur.com/P3B63.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/P3B63.png" alt="enter image description here" /></a></p>
  <p>If I change the email to an incorrect one, still it shows the email as a valid input letting user to submit the form.</p>
  <p><a href="https://i.stack.imgur.com/Qt6XO.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/Qt6XO.png" alt="enter image description here" /></a></p>