Laravel real-time notification not showing into console from Pusher - php

Question

I'm implementing Real-Time Notification in my Laravel project. I'm very close to achieve my goal. What I have done so far is I have saved the notifications into database and now wanted to render the same notification to user using Pusher.
I got response into Pusher but the issue is I' m not able to receive the notification in my console and under the console of another user to make it work like real time.
Currently, notifications are sending to Pusher, saving into database but notification is not showing into console.
App.js
require('./bootstrap');
//getting the ID's of all logged-in users
let userId = document.head.querySelector('meta[name="user-id"]').content;
Echo.private('App.Models.User.' + userId)
.notification((notification) => {
console.log(notification.type);
});
Vue.component('example', require('./components/Example.vue'));
const app = new Vue({
el: '#app',
});
Bootstrap.js
window._ = require('lodash');
window.$ = window.jQuery = require('jquery');
require('bootstrap-sass');
window.Vue = require('vue');
require('vue-resource');
Vue.http.interceptors.push((request, next) => {
request.headers.set('X-CSRF-TOKEN', Laravel.csrfToken);
next();
});
import Echo from "laravel-echo"
window.Pusher = require('pusher-js');
window.Echo = new Echo({
broadcaster: 'pusher',
key:'8c1d04bb8d1782b874b1',
cluster: 'ap2',
encrypted: false
});
DatabaseNotification.php
<?php
class DatabaseNotification extends Notification
{
use Queueable;
private $subscription;
public function __construct($letter)
{
$this->subscription = $letter;
}
public function via($notifiable)
{
return ['database','broadcast'];
}
public function toDatabase($notifiable)
{
return [
'letter' => $this->subscription,
];
}
public function toBroadcast($notifiable)
{
return [
'letter' => $this->subscription,
'count' => $notifiable->unreadNotifications->count(),
];
}
}
Response in Pusher