Vue

HTML

<div id="app">
  <h2>Tasks:</h2>
  <ul>
    <li v-for="task in tasks" @click="task.completed = !task.completed" :key="task.id">
      <p>Task {{ task.task }}. Completed? {{ task.completed }}</p>
      <p>Click me to toggle</p>
    </li>
  </ul>
  <pre>{{ tasks }}</pre>
</div>

CSS

body {
  background: #20262E;
  padding: 20px;
  font-family: Helvetica;
}

#app {
  background: #fff;
  border-radius: 4px;
  padding: 20px;
  transition: all 0.2s;
}

li {
  margin: 8px 0;
}

Vue

const tasks = [
           { id: 1, task: 't1', completed: false},
           { id: 2, task: 't2', completed: false},
           { id: 3, task: 't3', completed: false}
        ];
        
new Vue({
  el: "#app",
  data: {
  	tasks: []
  },
  created () {
  	setTimeout(() => {
    	this.tasks = tasks
    }, 2000)
  }
})