title: How can I clear validation-on-blur errors when I use an onBlur trigger?
body: <p>I am developing a v-text-field that will allow simple math expressions like 1+1 to result in 2 when you either press enter or blur (lose focus) from the text field. This is my code so far.</p>
  <pre><code>&lt;template&gt;
    &lt;v-text-field
      :rules=&quot;rules&quot;
      @blur=&quot;compute&quot;
      @keydown.enter=&quot;compute&quot;
      v-model=&quot;localValue&quot;
      validate-on-blur
    /&gt;
  &lt;/template&gt;
  
  &lt;script&gt;
  import { create, all } from 'mathjs'
  const math = create(all)
  
  export default {
      name: &quot;NumericTextField&quot;,
      props: [&quot;value&quot;],
      data () {
          return {
              localValue: this.value,
          }
      },
      watch: {
          value (v) {
              this.localValue = v
          },
      },
      methods: {
          compute () {
              try {
                  const result = math.evaluate(this.localValue)
                  this.$emit(&quot;input&quot;, result)
              } catch (e) {
                  console.log(&quot;compute error&quot;, e)
              }
          },
      },
      computed: {
          rules () {
                  return [v =&gt; /^([0-9]*[.])?[0-9]+$/.test(v) || &quot;Must be numeric.&quot;]
          },
      },
  }
  &lt;/script&gt;
  </code></pre>
  <p>There is one odd behavior in that when I blur the text field, by let's say tabbing away to the next text field, validate-on-blur takes effect and so does the @blur to compute the result. Validation wins this race I am left with a violation error showing up while the result quickly changes to a numeric answer which should be valid. Concretely, I type 1+1 (which is not numeric since there's a plus sign in there). When I press tab, the text box is changed to 2 (which is great) and also a validation error appears complaining about the fact that 1+1 is not numeric. That's not desired. If the result is numeric I'd like the validation to take that into account. But I don't know how to control this race condtion.</p>
  <p>I have tried, and had success latching on to the form of the page, and explicitly revalidating all forms on the field by giving my form a ref and then calling this.$refs.myForm.validate() at the end of compute. But that makes my component not really very reusable since it needs to know about the parent form. Furthermore, it's reevaluating all form validations on blur which I think could get expensive if there are a lot of these one one page.</p>
  <p>Is there a way to control the race condition? Or a work around?</p>