Проблема в реальном времени: трансляция (новый OneChatEvent ()) не будет отображаться для просмотра

Question

Все компоненты зарегистрированы. Pusher подключен и получает каждое Событие, в том числе и с Broadcast, а также базовые дескрипторы listenForWhisper, такие как «печатать», работают в реальном времени с обеих сторон.

По сути, единственное, что не работает, это то, что после отправки сообщения другу оно не всплывает или не отправляется в чат моего друга в режиме реального времени. Только после обновления страницы вручную, сообщение появляется.

Я пытался выяснить это в течение долгого времени, всегда переделывал, но это просто не будет работать.

После настройки:

MessageComponent.vue (Форма)

<div class="chat" v-chat-scroll>
    <div :class="{'text-right':chat.type == 0}" v-for="chat in chats" :key="chat.id">
        <div class="message">
            <p class="p">{{chat.message}}</p> 
        </div>
    </div>
</div>  
<form @submit.prevent="send">
    <div class="chat-send">
        <div class="row">
            <div class="col-md-7">
                <input type="text" class="input" placeholder="..." v-model="message">
            </div>
            <div class="col-md-5">
                <button class="button">Send</button>
            </div>
        </div>
    </div>
</form>

Скрипт, MessageComponent:

props: ['friend', 'user'],
data() {
    return {
      chats: [],
      message: null
    };
  },

methods: {
    pushToChats(message) {
      this.chats.push({
        message: message,
        type: 0,
        read_at: null,
        sent_at: "Now"
      });
    },

    send() {
      if (this.message) {
        this.pushToChats(this.message);
        axios
        .post(`/send/${this.friend.session.id}`, {
          content: this.message,
          to_user: this.friend.id
        })
        .then(res => (this.chats[this.chats.length - 1].id = res.data));
        this.message = null;
      }
    },

    getAllMessages() {
      axios
      .post(`/session/${this.friend.session.id}/chats`)
      .then(res => (this.chats = res.data.data));
    },

  },

created() { 

    this.read();
    this.getAllMessages();
    Echo.private(`Chat.${this.friend.session.id}`).listen("OneChatEvent", 
      e => {  
        this.chats.push({ message: e.content, type: 1, sent_at: "Now" });
      }
    );

  }

OneChatEvent.php

public $content; 
public $chat;  

public function __construct($content, $chat)
{
        $this->content = $content;
        $this->chat = $chat;  
        $this->dontBroadcastToCurrentUser();
}

public function broadcastOn()
{
        return new PrivateChannel('Chat.' . $this->chat['session_id']);
}

ChatController

public function chats(Session $session){
        return ChatResource::collection($session->chats->where('user_id', auth()->id()));
}

public function send(Session $session, Request $request)
    {
        $message = $session->messages()->create(['content' => $request->content]);
        $chat = $message->createForSend($session->id); // Session related methods (working)
        $message->createForReceived($session->id, $request->to_user); // Session related methods (working)

        broadcast(new OneChatEvent($message->content, $chat)); // somehow this will not be triggered

        return response($chat->id, 200);
    } 

Route и Channel, оба работают

Route::post('/send/{session}', 'ChatController@send')->middleware('auth');
Route::post('/session/{session}/chats', 'ChatController@chats')->middleware('auth');


// Channels

Broadcast::channel('Chat', function ($user) {
    return $user;
}, ['guard' => ['web']]);

Broadcast::channel('Chat.{session}', function ($user, Session $session) {
    if ($user->id == $session->user_id || $user->id == $session->friend_id) {
        return true;
    }
    return false;
});

Я что-то упускаю из виду? Назад и интерфейс работают, все модели подключены, БД также работает. Только трансляция OneChatEvent почему-то не работает или запускается.

Есть ли способ отладки или отставания в трансляции. Консоль ничего не показывает, тоже самое у vue devtools.