title: Vue/VueX date or text input with v-model doesn't reset after failed change
body: <p>I'm using computed properties in a Vue form component to bind input fields to model properties with one-way data flow. This works fine with <code>&lt;input type=&quot;number&quot;&gt;</code>:</p>
  <pre class="lang-html prettyprint-override"><code>&lt;input v-model.number.lazy=&quot;copies&quot; type=&quot;number&quot;&gt;
  </code></pre>
  <pre class="lang-js prettyprint-override"><code>export default {
    props: { item: { type: Object, default: () =&gt; {} } },
    computed: {
      copies: {
        get () { return this.item.copies },
        set (copies) { this.$emit('edited', { copies: copies }) }
      }
    }
  }
  </code></pre>
  <p>A listener in the parent component picks up the <code>edited</code> event, makes an API call:</p>
  <ul>
  <li>If the call succeeds, it returns an updated <code>item</code> which ends up back in the form component (via VueX mutations, component props, etc).</li>
  <li>If the call fails, the <code>item</code> is never updated, and when the input loses focus, it resets to bound value from the model (i.e. the unedited value).</li>
  </ul>
  <p>(Screencast GIF <a href="https://i.stack.imgur.com/RpKFj.gif" rel="nofollow noreferrer">here</a>.)</p>
  <p>It also works fine with checkboxes.</p>
  <p>However, for <code>&lt;input type=&quot;date&quot;&gt;</code> or <code>&lt;input type=&quot;text&quot;&gt;</code>, when the API call fails, the input never resets to the bound value.</p>
  <p>The inputs are simple:</p>
  <pre class="lang-html prettyprint-override"><code>&lt;input v-model.lazy=&quot;name&quot; type=&quot;text&quot;&gt;
  &lt;input v-model.lazy=&quot;dateAvailable&quot; type=&quot;date&quot;&gt;
  </code></pre>
  <p>The computed property for <code>name</code>, the text field, is similarly simple:</p>
  <pre class="lang-js prettyprint-override"><code>name: {
    get () { return this.term.name },
    set (name) { this.edited({ name: name }) }
  }
  </code></pre>
  <p>The computed property for <code>dateAvailable</code> is a little more complicated b/c of converting back and forth between ISO8601 dates (for the <code>&lt;input&gt;</code> value) and full ISO8601 timestamps with the correct timezone offset (for the API calls), but it's the same principle as the others.</p>
  <pre class="lang-js prettyprint-override"><code>dateAvailable: {
    get() { 
      // converts e.g. &quot;2021-12-21T00:00:00.000-08:00&quot; to &quot;2021-12-21&quot;
      return this.dateToDateInput(item.date_available)
    },
    set(dateVal) {
      // converts e.g. &quot;2021-12-21&quot; to &quot;2021-12-21T00:00:00.000-08:00&quot;
      const date = this.dateToISO8601(dateVal)
      this.$emit('edited', { date_available: date })
    }
  }
  </code></pre>
  <p>Workarounds I've tried, with mixed success:</p>
  <ul>
  <li>using <code>v-model</code> instead of <code>v-model:lazy</code>: no effect</li>
  <li>adding a custom <code>@blur</code> handler to reset the value: doesn't do anything, &amp; if it did, seems likely to lead to recursion problems</li>
  <li>calling <code>$this.forceUpdate()</code> after firing the event: works, but causes an annoying flicker in the event of a successful edit</li>
  </ul>
  <p>Workarounds I'm considering, but annoyed by:</p>
  <ul>
  <li>not using <code>v-model</code> but instead writing a bunch of custom code to more or less duplicate the behavior of <code>v-model</code></li>
  </ul>
  <p>Why don't the date and text inputs get reset to the bound value? Is it some quirk of the JS events on those inputs as opposed to a number or checkbox?</p>