title: How can I make delete function real-time using firebase / vue.js
body: <pre><code>&lt;v-tooltip top&gt;
    &lt;template v-slot:activator=&quot;{ on, attrs }&quot;&gt;
      &lt;v-btn
        plain
        small
        color=&quot;red&quot;
        v-bind=&quot;attrs&quot;
        v-on=&quot;on&quot;
        @click=&quot;removeData(project.id)&quot;
        &gt;&lt;v-icon&gt;mdi-delete&lt;/v-icon&gt;&lt;/v-btn
      &gt;
    &lt;/template&gt;
    &lt;span&gt;delete project&lt;/span&gt;
  &lt;/v-tooltip&gt;
  </code></pre>
  <p><strong>I am a beginner</strong>. This code above is the delete button with function <code>removeData(project.id)</code>, and this code below shows the function:</p>
  <pre><code>removeData(doc) {
    if (confirm(&quot;Are you sure ?&quot;)) {
      db.collection(&quot;projects&quot;)
        .doc(doc)
        .delete()
        .then(() =&gt; {
          console.log(&quot;Document successfully deleted!&quot;);
        });
    }
  },
  </code></pre>
  <p>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:</p>
  <pre><code>created() {
    db.collection(&quot;projects&quot;).onSnapshot((res) =&gt; {
      const changes = res.docChanges();
      changes.forEach((change) =&gt; {
        if (change.type === &quot;added&quot;) {
          this.projects.push({
            ...change.doc.data(),
            id: change.doc.id,
          });
        }
        if (change.type === &quot;removed&quot;) {
          //code goes here
        }
      });
    });
  },
  </code></pre>