Laravel Echo Not Working

Hi guys, I need to implement Laravel Echo in my project for broadcasting, and I have followed the documentation precisely, but Echo does not seem to be working, since events do come to pusher debug console, but i'm not able to see them in the browser. below are the most important pieces of code:

.env:

BROADCAST_DRIVER=pusher

PUSHER_APP_ID=0000000000000
PUSHER_APP_KEY=-----------------------------
PUSHER_APP_SECRET=-----------------------
PUSHER_APP_CLUSTER=ap2

broadcasting:

    'default' => env('BROADCAST_DRIVER', 'pusher'),

    /*
    |--------------------------------------------------------------------------
    | Broadcast Connections
    |--------------------------------------------------------------------------
    |
    | Here you may define all of the broadcast connections that will be used
    | to broadcast events to other systems or over websockets. Samples of
    | each available type of connection are provided inside this array.
    |
    */

    'connections' => [

        'pusher' => [
            'driver' => 'pusher',
            'key' => env('PUSHER_APP_KEY'),
            'secret' => env('PUSHER_APP_SECRET'),
            'app_id' => env('PUSHER_APP_ID'),
            'options' => [
                'cluster' => env('PUSHER_APP_CLUSTER'),
                'useTLS' => true,
            ],
        ],

channels.php (PS. note: always returned true in logs):

Broadcast::channel('App.User.{id}', function ($user, $id) {
    \Illuminate\Support\Facades\Log::info("Load from channel");
    \Illuminate\Support\Facades\Log::info((int) $user->id === (int) $id);
    return (int) $user->id === (int) $id;
});

FavoriteCreate.php:

FavoriteCreated implements ShouldBroadcast

/**
     * Get the channels the event should broadcast on.
     *
     * @return \Illuminate\Broadcasting\Channel|array
     */
    public function broadcastOn()
    {
        return new PrivateChannel('App.User.' . $this->favorite->favorable->id);
    }

    public function broadcastAs()
    {
        return 'favorite.created';
    }

app.blade.php: (I suspect that defer may have something to do with it):

        <main class="py-4">
            @yield('content')
        </main>
    </div>
    <!-- Scripts -->
    <script src="{{ asset('js/app.js') }}"></script>
    @yield('js')

BroadcastingServiceProvider.php:

public function boot()
    {
        Broadcast::routes();

        require base_path('routes/channels.php');
    }

bootstrap.js

import Echo from 'laravel-echo';

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

window.Echo = new Echo({
    broadcaster: 'pusher',
    key: '00000000000000',
    cluster: 'ap2',
    forceTLS: true
});

webpack.mix.js:

mix.js('resources/js/app.js', 'public/js')
    .sass('resources/sass/app.scss', 'public/css')
    .sourceMaps();

NotificationsComponent.vue:

created() {
        Echo.private('App.User.'+this.user)
        .listen('favorite-created', (e) => {
            console.log(e);
        })
    }

Pusher DebugConsole:

API MESSAGE
‌

Channel: private-App.User.3, Event: Illuminate\Notifications\Events\BroadcastNotificationCreated

06:00:45

API MESSAGE
‌

Channel: private-App.User.3, Event: favorite.created

Any help is highly appreciated since I have been working on this for the last four days without any success.