Laravel 5.4 Notification Broadcasting

I've set it up with the database, and everything is inserted correctly there. and I am listening correctly with Laravel Echo, and thats being recorded on Pusher, but all my notifications etc are not received by pusher? Can anyone see something I am doing wrong?

My Notification Class

<?php

namespace App\Notifications;
use Carbon\Carbon;

use Illuminate\Bus\Queueable;
use Illuminate\Notifications\Messages\BroadcastMessage;

use Illuminate\Notifications\Notification;
use Illuminate\Contracts\Queue\ShouldQueue;
use Illuminate\Notifications\Messages\MailMessage;

class RepliedToThread extends Notification 
{
    use Queueable;
    public $thread;
    /**
     * Create a new notification instance.
     *
     * @return void
     */
    public function __construct($thread)
    {
        $this->thread=$thread;
    }

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

  
    /**
     * Get the array representation of the notification.
     *
     * @param  mixed  $notifiable
     * @return array
     */
    // public function toDatabase($notifiable)
    // {
    //     return [
    //            'thread' => $this->thread, 
    //            'repliedToTime' =>Carbon::now(),
    //            'user'=>auth()->user()


    //     ];
    // }
    
    // public function toBroadcast($notifiable)
    // {
    //     return new BroadcastMessage([
    //                 'thread' => $this->thread, 
    //                'repliedToTime' =>Carbon::now(),
    //                'user'=>auth()->user(),
    //     ]);
    // }
    /**
     * Get the array representation of the notification.
     *
     * @param  mixed  $notifiable
     * @return array
     */
    public function toArray($notifiable)
    {
        return [
                    'thread' => $this->thread, 
                   'repliedToTime' =>Carbon::now(),
                   'user'=>auth()->user(),
        ];
    }
}

broadcating.php

although when this is fired it gets sent to the database but not to pusher. Everything for pusher is setup in my .env file.

<?php

return [

    /*
    |--------------------------------------------------------------------------
    | Default Broadcaster
    |--------------------------------------------------------------------------
    |
    | This option controls the default broadcaster that will be used by the
    | framework when an event needs to be broadcast. You may set this to
    | any of the connections defined in the "connections" array below.
    |
    | Supported: "pusher", "redis", "log", "null"
    |
    */

    'default' => "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' => 'ap1',
                'encrypted' => true
            ],
        ],

        'redis' => [
            'driver' => 'redis',
            'connection' => 'default',
        ],

        'log' => [
            'driver' => 'log',
        ],

        'null' => [
            'driver' => 'null',
        ],

    ],

];

.env file

BROADCAST_DRIVER="pusher"
PUSHER_KEY="public_key"
PUSHER_SECRET="secret_key"
PUSHER_APP_ID=app_id

bootstrap.js

window._ = require('lodash');

/**
 * We'll load jQuery and the Bootstrap jQuery plugin which provides support
 * for JavaScript based Bootstrap features such as modals and tabs. This
 * code may be modified to fit the specific needs of your application.
 */

try {
    window.$ = window.jQuery = require('jquery');

    require('bootstrap-sass');
} catch (e) {}

/**
 * We'll load the axios HTTP library which allows us to easily issue requests
 * to our Laravel back-end. This library automatically handles sending the
 * CSRF token as a header based on the value of the "XSRF" token cookie.
 */

window.axios = require('axios');

window.axios.defaults.headers.common['X-Requested-With'] = 'XMLHttpRequest';

/**
 * Next we will register the CSRF Token as a common header with Axios so that
 * all outgoing HTTP requests automatically have it attached. This is just
 * a simple convenience so we don't have to attach every token manually.
 */

let token = document.head.querySelector('meta[name="csrf-token"]');

if (token) {
    window.axios.defaults.headers.common['X-CSRF-TOKEN'] = token.content;
} else {
    console.error('CSRF token not found: http://ift.tt/2hex2P1');
}

// window.axios.defaults.headers.common = {
//     // 'X-CSRF-TOKEN': window.Laravel.csrfToken, <-- Comment it out (if you are extending layouts.app file, you won't require this.)
//     'X-Requested-With': 'XMLHttpRequest'
// };
import Echo from 'laravel-echo';

window.Pusher = require('pusher-js');
window.Echo = new Echo({
        
    broadcaster: 'pusher',
    key: '################',
    cluster: 'ap1',
    encrypted : true
});
/**
 * Echo exposes an expressive API for subscribing to channels and listening
 * for events that are broadcast by Laravel. Echo and event broadcasting
 * allows your team to easily build robust real-time web applications.
 */

// import Echo from 'laravel-echo'

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

// window.Echo = new Echo({
//      authEndpoint : 'http://localhost/forum_web/public/broadcasting/auth',

//     broadcaster: 'pusher',
//     key: '9964dcd35bae49f32d6c',
//     cluster: 'eu',
//     encrypted: true,
// });

iam used vue2

notification.vue

<template>
    <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"></span>
        </a>

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

<script>
    import NotificationItem from './NotificationItem.vue';
    export default {
        props: ['unreads', 'userid'],
        components: {NotificationItem},
        data(){
            return {
                unreadNotifications: this.unreads
            }
        },
        methods: {
            markNotificationAsRead() {
                if (this.unreadNotifications.length) {
                    axios.get('markAsRead');
                }
            }
        },
        mounted() {
            console.log('Component mounted. asd 1111');
            Echo.private('App.User.' + this.userid)
                .notification((notification) => {
                    console.log(notification);
                    
                });

        }
    }
</script>

via Chebli Mohamed