チェックボックスをクリックすると別のオブジェクトのチェックボックスの表示まで変わってしまう

現在Vueアプリの勉強としてTODOアプリを作成しています。
チェックボックスをクリックすると、該当するオブジェクトのboolean値は反転して

TODOsの場合はFinished TODOsへ
Finished TODOsの場合はTODOsへ

表示が切り替わりますが、
同じ項目(e.g Finished TODOs)の別のオブジェクトのチェックボックスの表示が反転してしまいます。
クリックしたオブジェクトとは別のオブジェクトのboolean値は変更されていません。
vue onclick eventなどで検索してみましたが、
原因がわかりません(m_ m)
もしわかる方がいらっしゃればご教授いただきますようよろしくお願いいたします(m _m)

ブラウザでの動作(gif)

動作環境

	バージョン
Vue.js	2.6.12
BootStrap4(by BootStrap-vue)	4.5.3

エラー内容・現状

- チェックボックスをクリックすると
Property or method "event" is not defined on the instance but referenced during render. Make sure that this property is reactive, either in the data option, or for class-based components, by initializing the property. See: https://vuejs.org/v2/guide/reactivity.html#Declaring-Reactive-Properties.
と表示される

該当するオブジェクトのboolean値は変更されている
該当しないオブジェクトのcheckboxの表示が反転してしまう(値自体は変更されていない扱いになっている)
inputタグにはv-on:click="toggleDone(event, task.id)"を定義してある(書き方がおかしい?)

期待する動作

エラーなくクリックイベントtoggleDone: function (event, id)が実行できること
クリックしたオブジェクトのbooleanが反転すること
クリックしたオブジェクトの表示が正しく切り替わること
クリックしていないデータに影響が出ないこと(チェックボックスの表示が変更されてしまうなど)

追記(ベストアンサーをもとに修正)

修正した部分のみピックアップします。
liタグ内ののv-forを修正することで解決します。

vue
1<!--before-->
2      <li
3        class="list-group-item"
4        v-bind:class="task.completed ? 'done' : 'todo'"
5        v-for="(task, index) in todoTasks"
6        :key="index"
7      >
8<!--after-->
9      <li
10        class="list-group-item"
11        v-bind:class="task.completed ? 'done' : 'todo'"
12        v-for="task in todoTasks"
13        :key="task.id"
14      >

該当しそうなコード

src/App.vue(1/2)

vue
1<template>
2  <div id="app">
3    <pre
4      >{{ $data }}
5    </pre>
6    <h3>TODOs ({{ todoTasks.length }})</h3>
7    <ul class="list-group">
8      <li
9        class="list-group-item"
10        v-bind:class="task.completed ? 'done' : 'todo'"
11        v-for="(task, index) in todoTasks"
12        :key="index"
13      >
14        <div class="form-check">
15          <label class="form-check-label">
16            <input
17              type="checkbox"
18              class="form-check-input"
19              name="task"
20              v-on:click="toggleDone($event, task.id)"
21              :checked="task.completed"
22            />
23            {{ task.description }}
24          </label>
25        </div>
26      </li>
27    </ul>
28    <h3>Finished TODOs ({{ completedTasks.length }})</h3>
29    <ul class="list-group">
30      <li
31        class="list-group-item"
32        v-bind:class="task.completed ? 'done' : 'todo'"
33        v-for="(task, index) in completedTasks"
34        :key="index"
35      >
36        <div class="form-check">
37          <label class="form-check-label">
38            <input
39              type="checkbox"
40              class="form-check-input"
41              name="task"
42              v-on:click="toggleDone($event, task.id)"
43              :checked="task.completed"
44            />
45            {{ task.description }}
46          </label>
47        </div>
48      </li>
49    </ul>
50  </div>
51</template>
52
53
54<script>
55export default {
56  name: "App",
57  data: function () {
58    return {
59      tasks: [
60        { id: 1, description: "task1", completed: false },
61        { id: 2, description: "task2", completed: false },
62        { id: 3, description: "task3", completed: true },
63        { id: 4, description: "task4", completed: true },
64      ],
65    };
66  },
67  computed: {
68    completedTasks: function () {
69      return this.tasks.filter((item) => item.completed == true);
70    },
71    todoTasks: function () {
72      return this.tasks.filter((item) => item.completed == false);
73    },
74  },
75  methods: {
76    toggleDone: function (event, id) {
77      let task = this.tasks.find((item) => item.id == id);
78      if (task) {
79        task.completed = !task.completed;
80      }
81    },
82  },
83};
84</script>

src/main.js(1/2)

javascript
1import Vue from 'vue'
2import App from './App.vue'
3import 'bootstrap/dist/css/bootstrap.css'
4import 'bootstrap-vue/dist/bootstrap-vue.css'
5
6Vue.config.productionTip = false
7
8new Vue({
9  render: h => h(App),
10}).$mount('#app')
11