title: error while calling the function when on-change event is fired
body: <p>I was trying to build a todo app  and in which I am trying to call a function markComplete on every checkbox being checked or unchecked. it throws error saying <strong>cannot read property 'completed' of undefined.</strong></p>
  
  <p>what could be its solution??</p>
  
  <pre><code>&lt;template&gt;
  
    &lt;div class="todos mt-4 mx-auto"&gt;
      &lt;div class="todo-item" v-bind:class="{'is-complete':todo.completed}" v-for="todo in todos" :key="todo.id"&gt;
  
        &lt;p&gt;
          &lt;input type="checkbox" v-on:change="markComplete"&gt;
          {{todo.title}} 
          &lt;button class="float-right del"&gt;&amp;times;&lt;/button&gt;
        &lt;/p&gt;
  
      &lt;/div&gt;
  
    &lt;/div&gt;
  
  &lt;/template&gt;
  
  &lt;script&gt;
  export default {
    props: ['todo'],
  
    data (){
      return {
        todos:[
          {
            id: 1,
            title: 'Learn Vue',
            completed: false
          },
          {
            id: 2,
            title: 'Creata a Todo App',
            completed: false
          },
          {
            id: 3,
            title: 'Create BM news UI',
            completed: false
          },
        ]
      }
    },
    methods: {
      markComplete: function(){
        this.todo.completed = !this.todo.completed
      }
    }
  }
  </code></pre>
  
  <p>just after running the app and clicking on the checkbox it consoles an error saying this...</p>
  
  <pre><code>[Vue warn]: Error in v-on handler: "TypeError: Cannot read property 'completed' of undefined"
  
  found in
  
  ---&gt; &lt;TodoItem&gt; at src/components/TodoItem.vue
         &lt;App&gt; at src/App.vue
           &lt;Root&gt;
  </code></pre>
  
  <pre><code> TypeError: Cannot read property 'completed' of undefined
  </code></pre>
  
  <p>check the this image for the console screenshot</p>
  
  <p><a href="https://i.stack.imgur.com/Lfnuo.png" rel="nofollow noreferrer">error image</a></p>
  
  <p>although it works on this condition</p>
  
  <p><code>&lt;input type="checkbox" v-on:change="todo.completed = !todo.completed"&gt;</code></p>