title: How should I use correctly the sync modifier with vuetify input custom event `@update:error`?
body: <p>I am using Vuetify, more specifically the <a href="https://dev.vuetifyjs.com/en/components/text-fields" rel="nofollow noreferrer"><code>v-text-field</code> component</a>.</p>
  <p>This component has a custom event <code>@update:error</code> that is syncable. I want to use it to update a boolean field in my template data object, and use this field to update an appended icon.</p>
  <p>I have read <a href="https://v2.vuejs.org/v2/guide/components-custom-events.html#sync-Modifier" rel="nofollow noreferrer">the documentation</a> and assumed it should work in the code below, but it doesn't; and I don't know what I missed. Here is a minimal example:</p>
  <pre class="lang-html prettyprint-override"><code>&lt;div id=&quot;app&quot;&gt;
    &lt;v-app&gt;
      &lt;v-row&gt;
        &lt;v-col xs=&quot;8&quot; col=&quot;8&quot; xl=&quot;6&quot; offset-xl=&quot;3&quot;&gt;
          &lt;v-form&gt;
            &lt;v-text-field v-model.trim=&quot;newUser.firstname&quot; 
                          :rules=&quot;nameRules&quot; 
                          label=&quot;Firstname&quot; 
                          :append-icon=&quot;errors.firstname ? 'mdi-alert-circle-outline' : 'mdi-check'&quot;
                          :error.sync=&quot;errors.firstname&quot;&gt;
             &lt;/v-text-field&gt;
          &lt;/v-form&gt;
        &lt;/v-col&gt;
      &lt;/v-row&gt;
    &lt;/v-app&gt;
  &lt;/div&gt;
  
  </code></pre>
  <p>The error event does not update my <code>errors.firstname</code> field consistently, thus not updating the appended icon.</p>
  <p>Check it in this pen: <a href="https://codepen.io/billybobbonnet/pen/RwNRmqd?editors=1011" rel="nofollow noreferrer">https://codepen.io/billybobbonnet/pen/RwNRmqd?editors=1011</a></p>
  <p>How can I get my data field to update with the synced event? If this event is somehow broken, is there a workaround you would advise me?</p>