イベントを通してモデルインスタンスをvueに渡したいです。

前提・実現したいこと

コントローラーで作成したモデルインスタンス$messageをイベントの引数として渡しているのですが、これをブロードキャストしてvueに渡したいのです。

該当のソースコード

コントローラー（MessageController.php）

php
1<?php
2
3namespace App\Http\Controllers;
4
5use App\Events\MessageAdded;
6use Illuminate\Http\Request;
7use Illuminate\Support\Facades\Auth;
8use App\Message;
9use App\User;
10
11class MessageController extends Controller
12{ 
13  public function store(Request $request){
14    $data = ['project_id' => $request->project_id,
15              'message' => $request->message,
16              'user_id' => Auth::id()
17            ];
18    $message = Message::create($data);
19    $message->user_name = User::findOrFail($message->user_id)->name;
20
21    event((new MessageAdded($message))->dontBroadcastToCurrentUser());
22    
23    return $message;
24  }
25}
26

イベント（MessageAdded.php）

php
1<?php
2
3namespace App\Events;
4//〜省略〜
5class MessageAdded implements ShouldBroadcast
6{
7  use Dispatchable, InteractsWithSockets, SerializesModels;
8  
9  public $message;
10
11  public function __construct($message)
12  {
13    $this->message = $message;
14  }
15
16  public function broadcastOn()
17  {
18    return new Channel('message-add-channel', $this->message);
19  }
20}

コンポーネント（MessageListComponent.vue）

JS
1<script>
2export default {
3  // propsはproject_detail.blade.phpから受け取っている
4  props: ["project"],
5  data() {
6    return {
7      messages: [],
8      currentUserId: "",
9      newMessage: "",
10    };
11  },
12  mounted() {
13    
14    // Laravel-Echoでpusherから受信してメッセージリストに追加する
15    // FIXME：追加した時に受信した側にユーザー名が表示されない。
16    window.Echo.channel("message-add-channel")
17                .listen("MessageAdded", response =>
18                {
19                  console.log(response); //【問題点】こちらでresponse.user_nameが含まれていない
20                  this.messages.unshift(response.message)
21                });
22    
23    // プロジェクトIDに属するメッセージ群を取得している
24    axios
25      .get("/api/messages", {
26        params: {
27          projectId: this.project.id,
28        },
29      })
30      .then((response) => (this.messages = response.data));
31  },
32  methods: {
33    addMessage() {
34      // 新規メッセージ情報をphpに渡した後、返り値を一覧に追加
35      axios
36        .post("/message/store", {
37          message: this.newMessage,
38          project_id: this.project.id,
39          })
40        .then((response) => {
41          console.log(response); //【補足】こちらではresponse.user_nameを含んだオブジェクトが確認できます
42          this.messages.unshift(response.data);
43          });
44
45      this.newMessage = "";
46    },
47  },
48};
49</script>

発生している問題・エラーメッセージ

以下のコードでコントローラーでテーブルにレコードを作成し、

$data = ['project_id' => $request->project_id,
         'message' => $request->message,
         'user_id' => Auth::id()
         ];
$message = Message::create($data);

その後、テーブルに登録はしないものの、コンポーネント側で必要な情報(user_name)を$messageに追加してイベントの引数としてセットしています。

$message->user_name = User::findOrFail($message->user_id)->name;
event((new MessageAdded($message))->dontBroadcastToCurrentUser());

しかし、以下でvueでresponseをコンソールで確認してみたところ、user_nameが含まれない状態になってしまっています。
（テーブルに登録したproject_idやmessageなどの情報は取得できています）

window.Echo.channel("message-add-channel")
           .listen("MessageAdded", response =>
            {
             console.log(response); //【問題点】こちらでresponse.data.user_nameが含まれていない
             this.messages.unshift(response.message)
            });

なぜイベントで渡した情報は$message->user_nameが含まれていない状態になってしまっているのかアドバイスいただきたいです。

ここ数日、解消できずに詰まってしまっています。。。何かヒントだけでも良いので教えていただきたいです。
もし、必要な情報が不足している、質問内容の意味がわからないなどのご指摘をいただければ、すぐに修正させていただきますので、よろしくお願いします。