组件复用传值（待解决问题）

写了一个点击列表，在prop传入一个数组出现了问题。

<template>
    <div id="box">
      <ul>
        <li v-for="task in list" @click="add(task)" :class="{'complated':task.finished}">
          {{task.id}}-{{task.name}}-
        </li>
      </ul>
    </div>
</template>

<script>
    export default {
        name: "TodoList-component",
      props:['list'],
      methods:{
          add:function (task) {
            task.finished = ! task.finished
          },

      }
    }
</script>

<style scoped>
.complated{
  text-decoration:line-through;
  color: green;
}
</style>

<template>
  <div id="app">
    <hello-world heading="Likes" color="green"></hello-world>
    <hello-world heading="Dislikes" color="red"></hello-world>
    <!--<to-do-list :list="tasks"> </to-do-list>-->
//直接写tasks传过去，点击字体变色
    <to-do-list :list="[{id:10,name:'hi',finished:false},{id:1,name:'book',finished:false}]"> </to-do-list>
//直接写数组，传过去点击字体不变色
  </div>
</template>

<script>
import HelloWorld from './components/button-component'
import ToDoList from './components/TodoList-component'

export default {
  name: 'App',
  data:function () {
    return{
      tasks:[
        {id:1,name:"book",finished:false},
        {id:2,name:"app",finished:false},
        {id:3,name:"school",finished:false},
        {id:4,name:"newpapers",finished:false},

      ]
    }
  },
  components: {
    HelloWorld,
    ToDoList
  }
}
</script>

<style>
#app {
  font-family: 'Avenir', Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>

但是检查到点击后{id:10,name:'hi',finished:false}里面的finished值确实改变了，绑定的:class="{'complated':task.finished}却不起作用。后续了解更多了，再来解决。