How can I make delete function real-time using firebase / vue.js

Question

<v-tooltip top>
  <template v-slot:activator="{ on, attrs }">
    <v-btn
      plain
      small
      color="red"
      v-bind="attrs"
      v-on="on"
      @click="removeData(project.id)"
      ><v-icon>mdi-delete</v-icon></v-btn
    >
  </template>
  <span>delete project</span>
</v-tooltip>

I am a beginner . This code above is the delete button with function removeData(project.id) , and this code below shows the function:

removeData(doc) {
  if (confirm("Are you sure ?")) {
    db.collection("projects")
      .doc(doc)
      .delete()
      .then(() => {
        console.log("Document successfully deleted!");
      });
  }
},

It worked successfully, but I don't know how to make it real-time with Firestore. I know only how to make it real-time when I add something as you see in the code below:

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") {
        //code goes here
      }
    });
  });
},

Answer 1

If this.projects is an array, you can remove the delete item from it with:

if (change.type === "removed") {
   this.projects = this.projects.filter(item => item.id !== change.doc.id);
}

Also see the MDN documentation on Array.filter .