Echo.private listen issue, real-time broadcasting

I am still struggling to get to know the magic of real time updates within my application.

This might be a redundant example (sorry for that), of a real-time-application approach, but I just can't get behind it, as everything is set up properly and working, except the real-time update within the view.

Based on the Pusher Laravel Chat App article (https://pusher.com/tutorials/chat-laravel/), i try to listen to a "MessageSent" Event, and then push it to the view, real time.

Pusher is getting the Events, subscription to the Channel is working, I can even get the Users, who are currently listening to the Channel.

.env

BROADCAST_DRIVER=pusher 
QUEUE_DRIVER=database
PUSHER_APP_CLUSTER=eu
+ KEY, APP_ID, SECRET

Pusher is receiving Events, API Messages and Subscriptions.

broadcasting.php

'pusher' => [
            'driver' => 'pusher',
            'key' => env('PUSHER_APP_KEY'),
            'secret' => env('PUSHER_APP_SECRET'),
            'app_id' => env('PUSHER_APP_ID'),
            'options' => [
                'cluster' => 'eu',
                'encrypted' => false,
            ],
],

bootstrap.js

import Echo from "laravel-echo"

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

window.Echo = new Echo({
    broadcaster: 'pusher',
    key: '', // provided
    cluster: 'eu',
    encrypted: false // also true is not working
    
});

ChatController

public function sendMessage(Request $request)
    {
      $user = Auth::user();

      $message = $user->messages()->create([
        'message' => $request->input('message'),
      ]);

      broadcast(new MessageSent($user, $message))->toOthers();

      // running php artisan queue:work (works)

      return ['status' => 'Message Sent!'];
    }

app.js

const app = new Vue({
    
    el: '#app',

    data: {
        messages: []
    },

    created() {
        this.fetchMessages();

        Echo.private('Chat') // also tried window.Echo.private
          .listen('MessageSent', (e) => {
            this.messages.push({
              message: e.message.message,
              user: e.user
            });
          });
    },

    methods: {
        fetchMessages() {
            axios.get('/messages').then(response => {
                this.messages = response.data;
            });
        },

        addMessage(message) {
            this.messages.push(message);

            axios.post('/messages', message).then(response => {
              console.log(response.data);
            });
        }
    }

});

ChatForm.vue:

export default {

        props: ['user'],

        data() {
            return {
                newMessage: ''
            }
        },

        methods: {
            sendMessage() {
                this.$emit('messagesent', {
                    user: this.user,
                    message: this.newMessage
                });

                this.newMessage = ''
            }
        }    

};

As everything seams so clear, the messages will be pushed to the DB, Events will be triggered by Pusher, and Events will be queued, I am afraid that I am missing something fundamental.

Laravel 5.6.16
composer require pusher/pusher-php-server // within my project directory (vagrant ssh)
npm install --save laravel-echo pusher-js  // within my project directory (vagrant ssh)

Even changed my local timezone to UTC, so that everything is in the same tz, with respect to the Pusher eu cluster.

Any obvious mistakes, or where could I get insights on why it is not pushing the message real-time to the view or suggestions to reinstall packages etc.?