Not displaying the content while broadcasting with pusher in Laravel - laravel

Question

I am developing a live chat app with Laravel 7 and Pusher as broadcast driver.
And i am facing a weird problem because its broadcasting an empty object,
but in my console I am receiving the right object/comment.
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 (event)
<?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();
}
}
}
Please note that wen i submit a new comment the event is happening, a new division have been created, but its empty.
Anyone can help with this problem ?! Thank you in advance