Not displaying the content while broadcasting with pusher in 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