Broadcasted Laravel notification is not shown in real-time on frontend, but is sent over Pusher and shown in console

I've been trying to receive notifications in real-time, such as in this video: https://www.youtube.com/watch?v=i6Rdkv-DLwk&t=1081s by using Pusher - The app is connected to pusher, I receive the notifications events in real-time with Pusher over the console, but I cannot update the notifications count in real-time, on the frontend(see my picture below the code), the new notification is not being shown on the frontend in real-time, only after the page is reloaded. I have a user, creating a patient for another user and when the patient is created, the user receives a notification. The only problem is, it is not being shown in real-time in the frontend. I use Laravel, Pusher, Laravel Echo and Vue.js for it, I believe the problem is in my Notification.vue file, after the component is mounted, please see it:

   <template>
<div id="notification">
    <li class="dropdown" @click="markNotificationAsRead">
        <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">
            <span class="glyphicon glyphicon-globe"></span> Notifications <span
                class="badge alert-danger">{{unreadNotifications.length}}</span>
        </a>

        <ul class="dropdown-menu" role="menu">
            <li>
                <notification-item v-for="unread in unreadNotifications" :unread="unread" :key="unread.id"></notification-item>
            </li>
        </ul>
    </li>
    </div>
</template>

<script>
import $ from 'jquery'
import axios from 'axios'
    import NotificationItem from './NotificationItem.vue';
    export default {
        props: ['unreads', 'userid', 'notifications'],
        components: {NotificationItem},
        data(){
            return {
                unreadNotifications: this.unreads
            }
        },
        methods: {
            markNotificationAsRead() {
                if (this.unreadNotifications.length) {
                    axios.get('/markAsRead');
                }
            }
        },
     mounted() {
            console.log('Component mounted.');
            Echo.private('users.' + this.userid)
                .notification((notification) => {
                    console.log(notification);
                    var newUnreadNotifications = {data: {patient: notification.patient, user: notification.user}};
             this.unreadNotifications.push(newUnreadNotifications);

});


        }
    }
</script>

On the frontend:

<notification :userid="{{auth()->id()}}" onclick="markNotificationAsRead()" :unreads="{{auth()->user()->unreadNotifications}}"></notification>

I believe the problem is here, in Notification.vue, I think the notification is not being pushed right:

var newUnreadNotifications = {data: {patient: notification.patient, user: notification.user}};
                 this.unreadNotifications.push(newUnreadNotifications);

NotificationItem.vue code:

<template>
    <div class="wrap">
        <a :href="threadUrl">
Нова нотификация
        </a>
    </div>
</template>

<script>
    export default {
        props:['unread'],
        data(){
            return {
                threadUrl:""
            }
        },
        mounted(){
            this.threadUrl="admin/patient/"+ this.unread.data.patient.id
        }

    }
</script>

ApprovePatient.php

<?php

namespace App\Notifications;

use Illuminate\Bus\Queueable;
use Illuminate\Support\Carbon;
use Illuminate\Notifications\Notification;
use Illuminate\Contracts\Queue\ShouldQueue;
use Illuminate\Notifications\Messages\BroadcastMessage;
use Illuminate\Contracts\Broadcasting\ShouldBroadcastNow;
use Illuminate\Contracts\Broadcasting\ShouldBroadcast;
use Illuminate\Notifications\Messages\MailMessage;

class ApprovePatient extends Notification
{
    use Queueable;

    public $patient;
    public $notifiable;
    /**
     * Create a new notification instance.
     *
     * @return void
     */
    public function __construct($patient)
    {

$this->patient=$patient;

        //
    }

    /**
     * Get the notification's delivery channels.
     *
     * @param  mixed  $notifiable
     * @return array
     */
    public function via($notifiable)
    {
        return ['database', 'broadcast'];
    }

    /**
     * Get the mail representation of the notification.
     *
     * @param  mixed  $notifiable
     * @return \Illuminate\Notifications\Messages\MailMessage
     */


    /**
     * Get the array representation of the notification.
     *
     * @param  mixed  $notifiable
     * @return array
     */
    public function toDatabase($notifiable)
    {
        //dd($notifiable);
        return [
'patient' => $this->patient,
'user' => auth()->user()



            //
        ];
    }

      /**
     * Get the array representation of the notification.
     *
     * @param  mixed  $notifiable
     * @return array
     */

    public function toBroadcast($notifiable)
    {
      //  dd($notifiable);
        return new BroadcastMessage([

'patient' => $this->patient,
'user' => auth()->user()
        ]);



            //

    }


        /**
     * Get the array representation of the notification.
     *
     * @param  mixed  $notifiable
     * @return array
     */

    public function toArray($notifiable)
    {
        return [
            'patient' => $this->patient,
            'user' => auth()->user()

        ];
    }
}

I had a mix('js/app.js') script which I had included in my app.blade.php and this caused the problem. After removing it, everything was working and the newUnreadNotifications was being updated asynchronously.

<script src="{{mix('js/app.js')}}"></script>