title: Prevent a v-model change in Vue
body: <p>I have a list of tasks stored in an array in my <code>data()</code> method.</p>
  
  <p>Is there a way I can prevent / reverse a change to an object when it's linked by a <code>v-model</code> directive?</p>
  
  <p>For example (in a component):</p>
  
  <pre><code>&lt;template&gt;
      &lt;tr v-for="task in tasks" :key="task.id"&gt;
          &lt;input @change="complete(task)" v-model="task.complete" type="checkbox" name="complete"&gt;
  
          &lt;td&gt;{{ task.summary }}&lt;/td&gt;
      &lt;/tr&gt;
  &lt;/template&gt;
  
  &lt;script&gt;
  export default {
      props: ['allowChanges'],
  
      data() {
          return {
              tasks: [],
          };
      },
  
      methods: {
          complete(task) {
              if (this.allowChanges) {
                  // axios.post() etc.
              } else {
                  // This doesn't work:
                  task.complete = !task.complete
              }
          },
      }
  }
  &lt;/script&gt;
  </code></pre>
  
  <p>I've tried using watchers and methods, but can't seem to reverse / cancel the change when made with a v-model directive?</p>