How to do real time updates on delete

I have the following which works fine to delete from firebase, however, it doesn’t reflect on the front end that the item was deleted until you refresh the page. How would I set it so that it also removes from the front end without having to manually hit refresh? Same question for editing too

<template>
    <v-dialog max-width="600px" v-model="dialog">
        <template v-slot:activator="{ on }">
            <v-icon class="pr-1" v-on="on">mdi-square-edit-outline</v-icon>
        </template>
        <v-card>
            <v-card-title>
                <h2 class="font-weight-light">Edit Project <v-btn class="red darken-4 white--text" @click="onDelete(projectId)">Delete</v-btn></h2>
            </v-card-title>
            <v-card-text>
                <v-form>
                    <v-row>
                        <v-col>
                            <v-text-field label="Title" v-model="title"></v-text-field>
                        </v-col>
                        <v-col>
                            <v-text-field label="Client" v-model="client"></v-text-field>
                        </v-col>
                    </v-row>
                    <v-row>
                        <v-col cols="6">
                            <h3>Add Milestone</h3>
                            <v-text-field label="Milestone" v-model="name"></v-text-field>
                            <v-btn @click="addMilestone">Add</v-btn>
                        </v-col>
                        <v-col cols="6">
                            <h3>Milestones</h3>
                            <v-list dense="dense">
                                <v-list-item v-for="mile in milestone" :key="mile.id">
                                    <v-list-item-content>
                                       {{ mile.id }}.{{ mile.text }}
                                    </v-list-item-content>
                                </v-list-item>
                            </v-list>
                        </v-col>
                    </v-row>
                    <v-spacer></v-spacer>
                    <v-row>
                        <v-spacer></v-spacer>
                        <v-col class="6">
                            <v-btn @click="editProject(projectId)">Confirm Changes</v-btn>
                        </v-col>
                    </v-row>
                </v-form>
            </v-card-text>
        </v-card>
    </v-dialog>
</template>

<script>
    import db from '@/fb.js'
    export default {
        data(){
            return {
                milestone: [],
                name: null,
                id: 1
            }
        },
        props: {
            projectId: String,
            title: String,
            client: String
        },
        methods: {
            addMilestone() {
                this.milestone.push({
                    text: this.name,
                    id: this.id++
                });
            },
            editProject(id) {
                db.collection('project').doc(id).update({
                    title: this.title,
                    client: this.client
                }).then(() => {
                    this.dialog = false;
                });
            },
            onDelete(id) {
                db.collection('project').doc(id).delete()
            }

        }
    }
</script>

<style scoped>

</style>

I know there’s an onSnapshot I can run but am unsure how to run the delete when I use it. For example, I have gotten as far as:

onDelete(id) {
                db.collection('project').doc(id).onSnapshot(snapshot => {
                    const changes = snapshot.docChanges();
                    changes.forEach (change => {
                        if(change.type === 'removed') {
                            this.projects.querySelector('[data-id=' + change.doc.id + ']')
                        }
                    })
                })
            }

But when I come to run it it says docChanges() is not a function