firestoreのドキュメントを削除するとドキュメントが増えてしまう原因がわからない。

Question

前提・実現したいこと

タスク管理アプリをfirebaseを使用して作成しています。タスク(ドキュメント)を削除しようとするとなぜか同じドキュメントが増えてしまいます。リロードしなおすとしっかりと削除されており、二つ同時に消えています。
ドキュメントを削除したと同時にリアルタイムに削除するにはどのようにすれば良いでしょうか。

該当のソースコード

deletetask(){
//taskの削除
            const channelId = this.$route.params.id
            db.collection("channels").doc(channelId).collection('tasks').doc(this.task.id).delete().then(function() {
            console.log("ドキュメントの削除をしました");
            }).catch(function(error) {
            console.error("ドキュメントの削除ができません: ", error);
            });
        }

//taskのリアルタイム表示
      const channelId = this.$route.params.id
      db.collection('channels').doc(channelId).collection('tasks').orderBy('deadline').onSnapshot((snapshot)=>{
          snapshot.docChanges().forEach((change)=>{
              const doc = change.doc
              //追加または削除した場合
              if(change.type === 'added' || change.type === 'removed'){
                   this.tasks.push({id: doc.id, ...doc.data()})
              }
          })
      })

Answer 1

削除したいのにpushしていることが問題だという意味のわからない質問でした。申し訳ないです。
こうなってしまったわけは、firestoreからデータを引っ張ってくるのをいったんNuxt側でデータをして保存してからそれを表示するという流れの理解を曖昧にしていたことが原因でした。

なので変更が起きたとき、データを全てpushし直すという挙動と勘違いしていました。
pushではなく該当の配列の要素を削除するという方法を用いて解決することができました。