Обновление элемента массива - Vue / Nuxt & Cloud Firestore

Question

У меня есть возможность выталкивать и извлекать данные из массива проектов, но у меня возникают проблемы с обновлением / изменением элемента массива, полученного от прослушивателя реального времени.

db.collection("packages").onSnapshot(res => {
  const changes = res.docChanges();
  changes.forEach(change => {
    if (change.type === "added") {
      console.log("added");
      this.projects.push({
        ...change.doc.data(),
        id: change.doc.id
      });
    }
    if (change.type === "modified") {
      console.log("modified");
    }
    if (change.type === "removed") {
      console.log("removed");
      this.projects.pop({
        ...change.doc.data(),
        id: change.doc.id
      });
    }
    });
   });

<div v-for="project in projects" :key="project.id"> {{ project.name }} </div>