title: Vue3: Uncaught TypeError: 'set' on proxy: trap returned falsish for property 'NewTodo'
body: <p>I got an error message:
  <strong>Uncaught TypeError: 'set' on proxy: trap returned falsish for property 'NewTodo'</strong></p>
  <p>That error appear when im trying to reset the input text value inside child component (FormAddTodo.vue).</p>
  <p><strong>App.vue:</strong></p>
  <pre><code>export default {
    data(){
      return{
        todos: [],
        newTodo: &quot;&quot;
      }
    },
    components: {
      Todos,
      FormAddTodo
    }
  }
  &lt;/script&gt;
  
  &lt;template&gt;
    &lt;div class=&quot;container mx-auto&quot;&gt;
        &lt;Todos :todos=&quot;todos&quot; /&gt;
        &lt;div class=&quot;py-8&quot;&gt;&lt;/div&gt;
        &lt;FormAddTodo :NewTodo=&quot;newTodo&quot; :Todos=&quot;todos&quot; /&gt;
    &lt;/div&gt;
  &lt;/template&gt;
  </code></pre>
  <p><strong>FormAddTodo.vue:</strong></p>
  <pre><code>&lt;template&gt;
      &lt;div class=&quot;formAddTodo&quot;&gt;
          &lt;form @submit.prevent=&quot;handleAddTodo&quot; class=&quot;addTodo&quot;&gt;
              &lt;input type=&quot;text&quot; class=&quot;&quot; placeholder=&quot;type new todo here...&quot; v-model=&quot;NewTodo&quot;&gt;
          &lt;/form&gt;
      &lt;/div&gt;
  &lt;/template&gt;
  
  &lt;script&gt;
      export default {
          props: ['NewTodo', 'Todos'],
          methods: {
              handleAddTodo(){
                  const colors = [&quot;cyan&quot;, &quot;blue&quot;, &quot;indigo&quot;, &quot;pink&quot;]
                  const todo = {
                      id: Math.random(),
                      content: this.NewTodo,
                      color: colors[Math.floor(Math.random() * ((colors.length-1) - 0 + 1) + 0)]
                  }
  
                  this.Todos.push(todo)
                  this.NewTodo = '' // this line throw the error
              }
          }
      }
  &lt;/script&gt;
  </code></pre>