Не отображать контент во время трансляции с помощью кнопки pusher в Laravel

Question

Я разрабатываю приложение для живого чата с Laravel 7 и Pusher в качестве драйвера вещания. И я столкнулся со странной проблемой, потому что он передает пустой объект, но в моей консоли я получаю правильный объект / комментарий.

indexComponent. vue:

<template>
    <div>
        <h1>All Comments</h1>
        <div style="margin-bottom:20px;">
            <textarea class="form-control" rows="3" name="body" placeholder="write a comment" v-model="commentBox" ></textarea>
            <button class="btn btn-success" style="margin-top:10px" v-on:click="createComment()" >Save Comment</button>
        </div>

        <div v-for='comment in this.listOfComments' v-bind:key="comment.id" class='card card-body mb-2'>
            <p>{{comment.body}}</p>
        </div>
    </div>
</template>

<script>
    export default {
        props: ['comments'],
        data() {
            return {
                commentBox: '',
                listOfComments: this.comments,
            }
        },
        created: function() {
            this.listen();
        },
        methods: {
            createComment: function() {
                axios.post('/api/comment', {
                    body: this.commentBox,
                    title: 'from axios',
                    user_id: '1'
                })
                    .then(response => {
                        this.listOfComments.unshift(response.data)
                        this.commentBox = '';
                    })
                    .catch(error => {
                        console.log(error.response);
                    });
            },
            listen: function() {
                Echo.channel('commentsChannel')
                    .listen('NewComment', (cmn) => {
                        console.log(cmn);
                        this.listOfComments.unshift(cmn);
                        console.log(this.comments[0]);
                    })
            }
        },
    }
</script>

NewComment. php (событие)

<?php

namespace App\Events;

use Illuminate\Broadcasting\Channel;
use Illuminate\Broadcasting\InteractsWithSockets;
use Illuminate\Broadcasting\PresenceChannel;
use Illuminate\Broadcasting\PrivateChannel;
use Illuminate\Contracts\Broadcasting\ShouldBroadcast;
use Illuminate\Contracts\Broadcasting\ShouldBroadcastNow;  //for no queueing 
use Illuminate\Foundation\Events\Dispatchable;
use Illuminate\Queue\SerializesModels;

use App\Comment;

class NewComment implements ShouldBroadcastNow
{
    use Dispatchable, InteractsWithSockets, SerializesModels;

    public $comment;

    /**
     * Create a new event instance.
     *
     * @return void
     */
    public function __construct(Comment $comment)
    {
        $this->comment = $comment;
    }

    /**
     * Get the channels the event should broadcast on.
     *
     * @return \Illuminate\Broadcasting\Channel|array
     */
    public function broadcastOn()
    {
        return new Channel('commentsChannel');
    }
}

CommentController. php

<?php

namespace App\Http\Controllers;

use Illuminate\Http\Request;
use App\Comment;
use Auth;
use App\Events\NewComment;


class CommentsController extends Controller {

    public function index() {
        $comments = Comment::orderBy('created_at','desc')->get();
        return view('comments/index')->with('comments',$comments);
    }

    public function store(Request $request) {
        $comment = new Comment;
        $comment->body  = $request->body;
        $comment->title = $request->title;
        $comment->user_id = $request->user_id;

        if($comment->save()){
            // event(new NewComment($comment));
            broadcast(new NewComment($comment))->toOthers();
            return $comment->toJson();
        }
    }

}

Обратите внимание, что когда я отправляю Новый комментарий о событии, создан новый раздел, но он пуст. Кто-нибудь может помочь с этой проблемой ?! Заранее спасибо