Laravel-echo not listening to websocket broadcasted events

Events are being triggered and it's being logged in the Websocket dashboard with the specified channel name, however Laravel-echo not grabbing the dispatched events.

Laravel-echo listener is placed in App.vue. I don't know if it is the right place to place the listener.

Laravel-echo configuration with "pusher" as broadcaster

window.Pusher = require('pusher-js'); window.Echo = new Echo({ broadcaster: 'pusher', key: process.env.VUE_APP_WEBSOCKET_KEY, wsHost: process.env.VUE_APP_WEBSOCKET_SERVER, cluster: process.env.VUE_APP_PUSHER_CLUSTER, wsPort: 6001, forceTLS: false, disableStats: true, encrypted:false, auth:{ headers:{ 'Authorization': 'Bearer '+localStorage.getItem('bearer-token'), } } });

Laravel-echo listener: userId => User uuid being fetched from localstorage window.Echo.channel('App.Models.User.'+userId).listen('SendCmcDueNotification', (e) => {
console.log('listener'); console.log(e);
});

The listener works only once I reload App.vue and reload the Navbar component.

This is confusing and has me stuck for quiet some days now.