Unable to get Laravel ECHO to receive event data in vue js

Hello everyone,

Been really struggling with this and I cannot find a way around. I am building a NON SPA which uses vues components inside blade files. The problem seems to come from vue js as I am sending correctly the event via the websockets. No errors showing in my vue console.

This is my vue front end.

    created() {
        window.Echo.private(`user.${this.userId}`)
            .listen('.SmartLight', (event) => {
                console.log(event.id);  //nothing received
                alert(event.id);  //nothing received

            });
}

My event:

<?php

namespace App\Events;

use Illuminate\Broadcasting\PrivateChannel;
use Illuminate\Contracts\Broadcasting\ShouldBroadcastNow;
use Illuminate\Queue\SerializesModels;

class SmartLight implements ShouldBroadcastNow
{
    use SerializesModels;

    public int $id;
    public array $userIds;

    /**
     * Create a new event instance.
     *
     * @param int $id
     * @param array $userIds
     * @return void
     */
    public function __construct(int $id, array $userIds)
    {
        $this->id = $id;
        $this->userIds = $userIds;
    }

    /**
     * Get the channels the event should broadcast on.
     *
     * @return array
     */
    public function broadcastOn(): array
    {
        // Create private channels for each user ID in the array
        $channels = [];

        foreach ($this->userIds as $userId) {
            $channels[] = new PrivateChannel("user.{$userId}");
        }
        return $channels;
    }

    /**
     * Get the data to broadcast.
     *
     * @return array
     */
    public function broadcastWith(): array
    {
        return [
            'id' => $this->id
        ];
    }
}

Telescope is detecting the event going out as:

{
"id": 135,
"userIds": [
376
]
}

I am also seeing the event going out on the websockets console as:

Channel: private-user.376, Event: App\Events\SmartLight

channels.php

Broadcast::channel('user.{id}', function ($user, $id) {
    return (int) $user->id === (int) $id;
});

Bootstrap.js:

import Echo from 'laravel-echo';

window.Pusher = require('pusher-js');

window.Echo = new Echo({
    broadcaster: 'pusher',
    key: process.env.MIX_PUSHER_APP_KEY,
    cluster: process.env.MIX_PUSHER_APP_CLUSTER,
    enabledTransports: ['ws', 'wss'],
    wsHost: window.location.hostname,
    wssHost: window.location.hostname,
    wsPort: 6001,
    wssPort: 6001,
    forceTLS: true,
    disableStats: true,
    encrypted: true
});

I am getting a good websocket connection but no events arer passing through.

Any idea why I am not receiving anything in my front end please?