Vuejs在标记任务之间切换不起作用

Question

您好我正在使用Vue，我正在尝试在标记读取或未读取任务之间创建切换。切换不想工作，我不明白为什么。当我点击它绝对没有任何反应，没有错误，没有。如果有人可以看看，我将不胜感激

这是我的代码：

     let bus = new Vue();

     let Task = {
        props: ['task'],
      template: `
     <div class="tasks" :class="{ 'task--done' : task.done , 'task-notdone' 
     : task.done === false }">


        {{ task.body }}
        <a href="#" @click.prevent="toggleDone(task.id)">Mark me as {{ 
      task.done ? 'not done' : 'done' }}</a>

      </div>
      `,

      methods: {
        toggleDone(taskId) {
          bus.$emit('task: toggleDone', taskId);
       }
     }

     };

     let Tasks = {
       components:{
         'task': Task
        },

        data() {
          return {
            tasks: [
              {id: 1, body: 'Task One', done: false },
              {id: 2, body: 'Task Two', done: true },
              {id: 3, body: 'Task Three', done: true }
            ],
          }
        },

      template: `
        <div>
        <template v-if="tasks.length">
        <task v-for="task in tasks" :key="task.id" :task="task"></task>
        </template>
        <span v-else>No tasks</span>
            <form action="">
             form
           </form>
      </div>
         `,

        methods: {
          toggleDone(taskId){
             let task = this.tasks.find(function (task) {
               return task.id === taskId;
            });

            console.log(task);
          }
        },

        mounted () {
            bus.$on('task:toggleDone', (taskId) => {
             this.toggleDone(taskId);
           })
         },
     };

       let app = new Vue({
        el:'#app',
        components: {
          'tasks': Tasks,

         },


      });