Vue 2如何使用Firebase进行实时更新

我最近接触过vue和vuetify，我在这里和那里都遵循一些教程，并通过阅读一些pdf文件创建了一个具有Firebase集成的待办事项列表，但是我有一个无法管理的问题，它是以下内容：

当您通过前端向数据库中添加元素时，会定期显示该元素，但是如果我要删除它，则会从后端而不是前端中删除它，直到至少更新页面为止。

脚本：

<script>
import Popup from '../components/Popup.vue'
import db from '@/fb'
// @ is an alias to /src

export default {
  components:{ Popup },
  data(){
    return{
      projects: [],
      snackbar: false
    }
  },
  methods: {

    sortBydaniele(prop){
      this.projects.sort((d,s) => d[prop] < s[prop] ? -1 : 1)
    },
    sortBysara(prop){
      this.projects.sort((d,s) => d[prop] > s[prop] ? -1 : 1)
    },

    cancella(id){ //delete
      console.log('deleted');
      db.collection('projects').doc(id).delete()
    }
  },
  created(){

    db.collection('projects').onSnapshot(res => {
      const changes  = res.docChanges();

      changes.forEach(change => {
        if(change.type === 'added'){
          this.projects.push({
            ...change.doc.data(),
            id: change.doc.id
          })
        }
        if(change.type === 'removed') {
          this.projects.splice(this.id, 1);
        }
      })
    })
  }
}
</script>

基本上，当我要删除特定的id时，我无法更新onSnapshot（）方法，或者，我设法使用pop（）或slice（）函数做到了这一点，但实际上，它们删除了添加到数组中的最后一个元素或第一个，因此不是真正选择的人。有人可以帮助我吗？

HTML：

<template>

  <div class="dashboard">

    <v-snackbar v-model="snackbar" :timeout="4000" top color="success">
      <span class="white--text">Aggiunto con successo!</span>
        <template v-slot:action="{ attrs }">
         <v-btn color="white" v-bind="attrs" text @click="snackbar = false">Chiudi</v-btn>
        </template>
    </v-snackbar>

    <h1 class="subtitle-1 grey--text">Dashboard</h1>

    <v-container class="my-5">

      <v-row class="mb-3">
        <v-tooltip top>
          <template v-slot:activator="{on}">
        <v-btn small depressed class="grey--text" @click="sortBydaniele('persona')" v-on="on">
          <v-icon left small>mdi-account</v-icon>
          <span class="caption text-lowercase">Daniele</span>
        </v-btn>
          </template>
          <span> Ordina le schede di Daniele</span>
        </v-tooltip>
         <v-tooltip top>
          <template v-slot:activator="{on}">
        <v-btn small depressed class="grey--text" @click="sortBysara('persona')" v-on="on">
          <v-icon left small>mdi-account</v-icon>
          <span class="caption text-lowercase">Sara</span>
        </v-btn>
          </template>
          <span> Ordina le schede di Sara</span>
        </v-tooltip>
        <v-col>
        <div align="right">
        <Popup @projectAdded="snackbar = true"/>
        </div>
        </v-col>
      </v-row>
      

       <v-card flat tile class="pa-3" v-for="project in projects" :key="project.titolo">
         <v-row row wrap :class="`pa-3 project ${project.stato}`">
           <v-col cols="12" md="7">
             <div class="caption grey--text">Ricordati di:</div>
             <div>{{ project.titolo }}</div>
           </v-col>
           <v-col xs="2">
             <div class="caption grey--text">Entro il</div>
             <div>{{ project.entro }}</div>
           </v-col>
           <v-col xs="2">
             <div align="right">
               <v-chip small :color="`${project.stato}`" :class="`v-chip--active white--text caption my-2`">{{ project.stato }}</v-chip>
             </div>
           </v-col>
           <v-col xs="2">
             <div align="right">
             <v-btn small icon @click="cancella(project.id)">
               <v-icon color="red darken-1">mdi-delete</v-icon>
             </v-btn>
             </div>
           </v-col>
         </v-row>
         <v-row cols="12">
          <v-divider></v-divider>
         </v-row>
       </v-card>

   </v-container>

  </div>
</template>