Rendering duplicate data in a notification list whenever notification button taped in VUE JS (Quasar framework)

Question

Same data render multiple times whenever I click on notification, I want to empty variable or list and then re render it, but it is not happening. please help me ! Below is an evidence of what is happening and the code I am using:

Duplicate data rendering

<q-list
 bordered
 style="background: white"
 v-for="(item, id) in notifications"
 :key="id">

export default {
    computed: {
        notifications: {
            get() {
                return this.$store.state.notification.notifications;
            },
            set(value) {
                this.$store.commit("notification/setValue", {
                    key: "notifications",
                    value: value
                });
            }
        }
    },
    async created() {
        let that = this;
        var notification_snap1 = await this.$db.collection("notifications")
            .where("receiver", "==", this.$q.localStorage.getItem("user_id"))
            .orderBy("time", "desc").get();
        notification_snap1.docs.forEach(doc => {
            that.notifications.push({...doc.data(), id: doc.id
            });
        });
    }
}

Answer 1

The problem is that you are not flushing your notifications array, which is causing the duplicate records.

Try adding the following line of code before your foreach

that.notifications = []

This will make it work.