Vue.js component not updating after notification is received via websocket in Laravel

Question

I am trying to populate the notification list on real-time but view vue component is not updating. My code so far:

app.js

require('./bootstrap');
window.Vue = require('vue');

Vue.component('notification-alert', require('./components/NotificationAlert.vue').default);
Vue.component('notification-item', require('./components/NotificationItem.vue').default);

const app = new Vue({
    el: '#notification_alert',

    data: {
        notifications: [],
        notify_count: 0
    },
    created() {
        this.fetchNotifications();
        this.checkNotifications();

        Vue.prototype.$userId = document.querySelector("meta[name='user-id']").getAttribute('content'),

        Echo.private('user.'+ this.$userId)
            .notification((notification) => {
                // console.log(notification); // This works perfectly fine, notification appear in Dev Console without reloading.
                this.notifications.push(notification);
                this.notify_count++;
           });
    },
    methods: {
        fetchNotifications() {
            axios.get('/doc_booking/public/notification/data').then(response => {
                this.notifications = response.data;
            });
        },
        checkNotifications(){
            axios.get('/doc_booking/public/notification/check').then(response => {
                this.notify_count = response.data;
            });
        },
    },
});

NotificationItem.vue

<template>
    <ul class="menu list-unstyled">
        <li v-for="notification in notifications" v-if="notification.type === 'App\\Notifications\\OrderCancelled' || notification.type === 'App\Notifications\OrderAccepted' || notification.type === 'App\Notifications\OrderCompleted'">
            <a href="javascript:void(0);">
                <div class="icon-circle bg-warning" v-if="notification.type === 'App\\Notifications\\OrderCancelled' && (notification.data.cancel_type === 1 || notification.data.cancel_type === 2)"><i class="zmdi zmdi-close"></i></div>
                <div class="icon-circle bg-danger" v-if="notification.type === 'App\\Notifications\\OrderCancelled' && notification.data.cancel_type === 3"><i class="zmdi zmdi-delete"></i></div>
                <div class="icon-circle bg-primary" v-if="notification.type === 'App\\Notifications\\OrderAccepted'"><i class="zmdi zmdi-check"></i></div>
                <div class="icon-circle bg-green" v-if="notification.type === 'App\\Notifications\\OrderCompleted'"><i class="zmdi zmdi-case-check"></i></div>
                <div class="menu-info">
                    <h4 v-if="notification.type === 'App\\Notifications\\OrderCancelled' && notification.data.cancel_type === 1">Order Cancelled By Notary: {{ notification.data.order_id }}</h4>
                    <h4 v-if="notification.type === 'App\\Notifications\\OrderCancelled' && notification.data.cancel_type === 2">Order Cancelled: {{ notification.data.order_id }}</h4>
                    <h4 v-if="notification.type === 'App\\Notifications\\OrderCancelled' && notification.data.cancel_type === 3">Order Deleted: {{ notification.data.order_id }}</h4>
                    <h4 v-if="notification.type === 'App\\Notifications\\OrderAccepted'">Order Accepted: {{ notification.data.order_id }}</h4>
                    <h4 v-if="notification.type === 'App\\Notifications\\OrderCompleted'">Order Completed: {{ notification.data.order_id }}</h4>
                </div>
            </a>
        </li>
    </ul>
</template>
<script>
    export default {
        props: ['notifications'],
    };
</script>

NotificationAlert.vue

<template>
    <div class="notify" v-if="notify_count > 0"><span class="heartbit"></span><span class="point"></span></div>
    <div class="notify" v-else></div>
</template>

<script>
    export default {
        props: ['notify_count']
    };
</script>

In my blade file I'm using it as

<notification-alert :notify_count="notify_count"></notification-alert>

<notification-item :notifications="notifications"></notification-item>

Except for real-time update everything else is working. If I refresh notifications are properly fetched and notification alert is properly displayed. But when Notification event occurs notification doesn't render on view without reloading but if I print the notification object in console it works perfectly fine. Any suggestion or help would be appreciated. Thanks

Answer 1

In your Echo.private() block, try changing

this.notifications.push(notification);

to

this.notifications = [...this.notifications, notification];

It could be a reactivity issue. The new code does the same thing but rewrites the entire array to the data property.