vue.jsで理解出来ない動きがあります

Question

vue.jsの学習を始めたばかりで、この記事（https://ueqareer.net/2770）を元にtodoアプリを作ってみたのですが（作成したアプリ→https://vue-todo-169c9.firebaseapp.com/）、どうしても理解できない動きがあります。

このアプリではタスク横のチェックボックスを入力すると「完了」ステータスになり、「未完タスク一覧」ボタンで未完了のタスクだけ表示できるのですが、「未完タスク一覧」ボタンを押した上でチェックを入力すると、関係ないタスクまでチェックが入り一覧から消えてしまいます。また、残ったタスクにもなぜか1つチェックが入ってしまいます。

詳しく現象を書くと、
・1番目のタスクにチェックを入れると、消えるのは2番目。チェックが入った状態で残るのは3番目
・「全て」ボタンを押して全タスクを表示すると、3番目のチェックが消える。そして1番目のチェックを外すと2番目のチェックも連動して消える

で、内部の動きを調べてみたところ、
・2番目と3番目に勝手にチェックが入るが、データベース（firebase）上ではタスクのステータス（isComplete）は未完（false）。でもコンソール上でタスクのステータスを確認すると、2番目のステータスは完了（true）になっている
・2番目と3番目のチェックが変わる時、isCompleteのtrue/falseを変換するメソッドupdateIsCompleteTodoは動いていない

というところまで分かりました。が、原因までわかりませんでした。。
動きを調べるほど意味がわからず、正直怪奇現象のように感じています…。

vue.jsに詳しい方、原因をご教授頂けないでしょうか。

ソースコードは以下になります。
（参考にした記事のソースコードそのままです。）

Task.vue

<template>
  <div class="task">
     <h2>タスク</h2>
    <div>
      <input type="text" v-model="newTodoName">
      <button type="submit" v-on:click="createTodo()">タスク作成</button>
    </div>
    <ul>
      <li><button type="submit" v-on:click="showTodoType = 'all'">すべて</button></li>
      <li><button type="submit" v-on:click="showTodoType = 'active'">未完タスク一覧</button></li>
      <li><button type="submit" v-on:click="showTodoType = 'complete'">完了タスク一覧</button></li>
    </ul>
    <!-- todoの一覧表示 -->
    <ul v-for="(todo, key) in filteredTodos" :key="todo.id">
      <li><input class="toggle" type="checkbox" v-model="todo.isComplete" v-on:click="updateIsCompleteTodo(todo, key)">{{ todo.name }}</li>
      <button type="submit" v-on:click="deleteTodo(key)">削除</button>
    </ul>
  </div>
</template>
 
<script>
import firebase from "firebase";
 
export default {
  name: "Task",
  data() {
    return {
      database: null,
      todosRef: null,
      newTodoName: "",
      showTodoType: "all",
      todos: []
    };
  },
  created: function() {
    this.database = firebase.database();
    this.uid = firebase.auth().currentUser.uid;
    this.todosRef = this.database.ref("todos/" + this.uid);
 
    // データに変更があると実行されるfunction
    this.todosRef.on("value", (snapshot) => {
      this.todos = snapshot.val(); // 再取得してtodosに格納する
    });
  },
  computed: {
    // フィルターの実装showTodoTypeが変更されると実行される
    filteredTodos: function() {
      if (this.showTodoType == "all") {
        return this.todos;
      } else {
        var showIsComplete = false;
        if (this.showTodoType == "complete") {
          showIsComplete = true;
        }
        var filterTodos = {};
        for (var key in this.todos) {
          var todo = this.todos[key];
          if (todo.isComplete == showIsComplete) {
            filterTodos[key] = todo;
          }
        }
        return filterTodos;
      }
    }
  },
  methods: {
    // DBのtodos/[uid]/以下にデータを格納していく
    createTodo: function() {
      if (this.newTodoName == "") {
        return;
      }
      this.todosRef.push({
        name: this.newTodoName,
        isComplete: false
      });
      this.newTodoName = "";
    },
    // 完了・未完了の値の更新
    updateIsCompleteTodo: function(todo, key) {
      todo.isComplete = !todo.isComplete;
      var updates = {};
      updates[key] = todo;
      this.todosRef.update(updates)
    },
    // todoの削除
    deleteTodo: function(key) {
      this.todosRef.child(key).remove();
    }
  }
};
</script>
 
<style>
</style>

補足情報（FW/ツールのバージョンなど）

macOS Mojave 10.14.5
vagrant 2.0.2
vue-cli 3.11.0
vue 2.6.0
firebase 7.5.0

Answer 1

v-model と v-on:click で2回ユーザからのイベントを取得しています（前者は変更イベント、後者はクリックイベント）。

そこで、完了/未完了の状態反映は v-model ではなく v-bind:value を用い、状態変更のイベントを v-on:change ないし v-on:input で取得するように修正するといかがでしょうか。

<input type=“checkbox” v-bind:value=“todo.isComplete” v-on:change=“updateIsCompleteTodo(todo,key)”>