title: error Unexpected mutation of "todo" prop in vue.js (I'm using vue3)
body: <p>I'm making a <em>todo</em> app in <em>vue.js</em> which has a component <code>TodoItem</code></p>
  <pre class="lang-js prettyprint-override"><code>&lt;template&gt;
    &lt;div class=&quot;todo-item&quot; v-bind:class=&quot;{'is-completed':todo.completed}&quot;&gt;
      &lt;p&gt;
        &lt;input type=&quot;checkbox&quot; @change=&quot;markCompleted&quot; /&gt;
        {{todo.task}}
        &lt;button class=&quot;del&quot;&gt;x&lt;/button&gt;
      &lt;/p&gt;
    &lt;/div&gt;
  &lt;/template&gt;
  
  &lt;script&gt;
  export default {
    name: &quot;TodoItem&quot;,
    props: [&quot;todo&quot;],
    methods: {
      markCompleted() {
        this.todo.completed = true
      },
    },
  };
  &lt;/script&gt;
  </code></pre>
  <p>todo prop that I'm passing:</p>
  <pre class="lang-js prettyprint-override"><code>{
    id:1,
    task:'todo 1',
    completed:false
  }
  </code></pre>
  <p>but it is throwing an error <strong>error  Unexpected mutation of &quot;todo&quot; prop</strong></p>