How do I refresh vuejs page on delete? - firebase

Question

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 tried the following when trying to use snapshot to update but got error that docChanges is not a function
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 + ']')
}
})
})
}

Answer 1

U can simply add emit event and in created method make on function it's allow the system know when there a saved emit so do some thing
in you app.js add:
window.Fire = new Vue();
and in export default make created function like this:
created() {
Fire.$on('refresh',()=>{
make some thing ....
});
}
and when you want to fire the emit just do this:
Fire.$emit('refresh');