Vue.jsとFirebaseを用いたToDoアプリで完了、未完了、とフィルターをかけた状態でタスク管理をしたい。

初めて質問させていただきました。よろしくお願いいたします。

前提・実現したいこと

todoリストのアプリ作成を行っています。
その際未完タスク一覧や完了タスク一覧を表示した状態でタスクの完了未完了を管理するチェックボックスを押すと他のタスクまでチェックボックスが外れてしまいます。

発生している問題・エラーメッセージ

フィルターで【全て】を選んでいる状態で各ToDoのチェックボックスを操作しても問題ないのですが、
【未完タスク一覧】【完了タスク一覧】を選択した状態でToDoのチェックボックスを操作すると1個下と2個下のToDoのチェックボックスまで操作してしまいます

該当のソースコード

Vue.js
1<template>
2  <div class="task">
3     <h2>タスク</h2>
4    <div>
5      <!-- 初期はVーmodelで"newTodoName"を入れているが空白、故にタスク作った後に空白にしないとミスが起こる -->
6      <input type="text" v-model="newTodoName">
7      <button type="submit" v-on:click="createTodo()">タスク作成</button>
8    </div>
9    <ul>
10      <li><button type="submit" v-on:click="showTodoType = 'all'">すべて</button></li>
11      <li><button type="submit" v-on:click="showTodoType = 'active'">未完タスク一覧</button></li>
12      <li><button type="submit" v-on:click="showTodoType = 'complete'">完了タスク一覧</button></li>
13    </ul>
14    <!-- todoの一覧表示 -->
15    <ul v-for="(todo, key) in filteredTodos" :key="todo.id">
16      <li class="card"><input type="checkbox" v-model="todo.isComplete" v-on:click="updateIsCompleteTodo(todo, key)">{{ todo.name + key }}</li>
17      <button type="submit" v-on:click="deleteTodo(key)">削除</button>
18    </ul>
19  </div>
20</template>
21<script>
22import firebase from "firebase";
23
24export default {
25  name: "Task",
26  data() {
27    return {
28      database: null,
29      todosRef: null,
30      newTodoName: "",
31      showTodoType: "all",
32      todos: []
33    };
34  },
35  created: function() {
36    this.database = firebase.database();
37    this.uid = firebase.auth().currentUser.uid;
38    // refはreferenceでデータベースにある特定の項目を指し示すメソッド
39    this.todosRef = this.database.ref("todos/" + this.uid);
40    // データに変更があると実行されるfunction
41    var _this = this;
42    this.todosRef.on('value', function(snapshot) {
43      _this.todos = snapshot.val(); // データに変化が起きたときに再取得する
44    });
45  },
46  computed: {
47    // フィルターの実装showTodoTypeが変更されると実行される
48    filteredTodos: function () {
49      if (this.showTodoType == 'all') {
50        return this.todos;
51      } else {
52        var showComplete = false;
53        if (this.showTodoType == 'complete') {
54          showComplete = true
55        }
56        var filterTodos = {};
57
58        for (var key in this.todos) {
59          var todo = this.todos[key];
60          if (todo.isComplete == showComplete) {
61            filterTodos[key] = todo;
62            console.log(filterTodos[key]);
63          }
64        }
65        console.log(filterTodos);
66        return filterTodos;
67      }
68    }
69  },
70  methods: {
71    // DBのtodos/[uid]/以下にデータを格納していく
72    createTodo: function() {
73      if (this.newTodoName == "") { return; }
74      this.todosRef.push({
75        name: this.newTodoName,
76        isComplete: false,
77      })
78      this.newTodoName = "";
79    },
80    // 完了・未完了の値の更新
81    updateIsCompleteTodo: function(todo, key) {
82      todo.isComplete = !todo.isComplete;
83      // DB内のデータを更新する
84      var updates = {};
85      // todo.idで変更するtodoタスクを指定し、dataが更新されたtodoを挿入する
86      updates[key] = todo;
87      this.todosRef.update(updates)
88    },
89    // todoの削除
90    deleteTodo: function(key) {
91      this.todosRef.child(key).remove();
92    }
93  }
94};
95</script>

試したこと

デバッグをし続けた結果、

this.showTodoType == 'all'

ではない時の下記のループ処理内においてなぜか操作したToDoのチェックボックスの1個下と2個下のToDoのチェックボックスまで操作している事はわかりました。しかしここではチェックボックスの真偽値に関わる

　isComplete: false,

の操作はありません。なぜ影響してしまっているのかわかりません。

else {
        var showComplete = false;
        if (this.showTodoType == 'complete') {
          showComplete = true
        }
        var filterTodos = {};

        for (var key in this.todos) {
          var todo = this.todos[key];
          if (todo.isComplete == showComplete) {
            filterTodos[key] = todo;
            console.log(filterTodos[key]);
          }
        }
        console.log(filterTodos);
        return filterTodos;
      }
    }
  },

解決方法が分かる方がいらっしゃいましたら教えていただけると幸いです。
よろしくお願いいたします。