fix: bind live-notification listeners at setup time, not inside onMounted

Manual end-to-end verification (Task 12) with a real Reverb server and
real browser sessions found that Dashboard.vue and Thread.vue never
actually received live MessageCreated/ThreadCreated updates: calling
useEchoNotification() from inside onMounted() meant its own internal
onMounted/notification-listener registration silently never bound.
Moving the call to top-level <script setup> scope fixes it.

Also found that ThreadCreated's payload was missing participants' user
data live (though correct on a fresh page load): the notification's
Thread model loses relations attached only via setRelation() once it
round-trips through queue serialization (SerializesModels), even on
the sync queue connection. Fixed by explicitly reloading
participants.user/messages.user in toArray(), and added a regression
test that reproduces the round-trip instead of relying on
Notification::fake(), which bypasses it and would not have caught
this.

Author: ikidnapmyself

app/Notifications/ThreadCreated.php

@@ -46,7 +46,7 @@ public function via($notifiable)
     public function toArray($notifiable)
     {
         return [
-            'payload' => (new ThreadResource($this->thread))->resolve(),
+            'payload' => (new ThreadResource($this->thread->load('participants.user', 'messages.user')))->resolve(),
         ];
     }
 

resources/js/pages/Dashboard.vue

@@ -1,5 +1,5 @@
 <script setup>
-import { ref, onMounted } from 'vue'
+import { ref } from 'vue'
 import { useEchoNotification } from '@laravel/echo-vue'
 import AppHeader from '../components/organisms/AppHeader.vue'
 import ThreadList from '../components/organisms/ThreadList.vue'
@@ -27,11 +27,7 @@ function transformThread(payload) {
     }
 }
 
-onMounted(() => {
-    if (!props.auth) {
-        return
-    }
-
+if (props.auth) {
     useEchoNotification(`App.Models.User.${props.auth.id}`, (notification) => {
         const payload = notification.payload
         const type = notification.type
@@ -64,7 +60,7 @@ onMounted(() => {
             threads.value = next
         }
     })
-})
+}
 </script>
 
 <template>

resources/js/pages/Thread.vue

@@ -1,5 +1,5 @@
 <script setup>
-import { ref, onMounted, computed } from 'vue'
+import { ref, computed } from 'vue'
 import { useEchoNotification } from '@laravel/echo-vue'
 import AppHeader from '../components/organisms/AppHeader.vue'
 import AppAvatar from '../components/atoms/AppAvatar.vue'
@@ -30,21 +30,17 @@ function transform(payload) {
     }
 }
 
-onMounted(() => {
-    if (!props.auth) {
-        return
-    }
-
+if (props.auth) {
     useEchoNotification(`App.Models.User.${props.auth.id}`, (notification) => {
         const payload = notification.payload
 
-        if (payload?.attributes?.thread_id === props.thread.id) {
+        if (notification.type === 'App\\Notifications\\MessageCreated' && payload?.attributes?.thread_id === props.thread.id) {
             if (!messages.value.some((m) => m.id === payload.id)) {
                 messages.value.push(transform(payload))
             }
         }
     })
-})
+}
 </script>
 
 <template>

tests/Unit/MessageTest.php

@@ -447,4 +447,37 @@ public function test_notifications_carry_eager_loaded_user_relation_in_payload()
             return Arr::get($payload, 'payload.attributes.user.attributes.name') === $newParticipant->name;
         });
     }
+
+    /**
+     * Reproduces the real dispatch path: ShouldQueue notifications are
+     * serialized and restored via SerializesModels before toArray() runs
+     * (this happens even on the "sync" queue connection), which drops any
+     * relation set only via setRelation() and never actually eager-loaded.
+     * ThreadCreated::toArray() must reload participants.user itself rather
+     * than assume the caller's in-memory relations survive that round-trip.
+     *
+     * @return void
+     */
+    public function test_thread_created_toarray_reloads_participant_user_after_serialization_round_trip()
+    {
+        $sender = User::factory()->create(['notify_via' => ['broadcast']]);
+        $recipient = User::factory()->create(['notify_via' => ['broadcast']]);
+
+        $thread = $this->service->newThread('Serialization Round Trip', $sender, $this->envelope(), [$recipient->id]);
+
+        // Fetch a bare copy with participants loaded but participants.user NOT
+        // loaded, mirroring what SerializesModels restores after unserialize().
+        $bareThread = Thread::with('participants')->findOrFail($thread->id);
+
+        $notification = new ThreadCreated($bareThread);
+        $payload = $this->resolvedPayload($notification->toArray($recipient));
+
+        /** @var array<int, array<string, mixed>> $participants */
+        $participants = Arr::get($payload, 'payload.attributes.participants', []);
+        $participantUserNames = collect($participants)
+            ->pluck('attributes.user.attributes.name')
+            ->filter();
+
+        $this->assertCount(2, $participantUserNames);
+    }
 }