When adding a comments, it is visible on the client

src/views/contents/ContentCard.vue

@@ -1,6 +1,6 @@
 <template>
 
-  <div class="shadow-md rounded-lg bg-blue-100">
+  <div class="shadow-md rounded-lg bg-gray-50">
 
     <div class="text-lg font-bold">
       {{ props.content.title }}
@@ -45,12 +45,12 @@
 
       <div>
         <h2 class="font-sans font-semibold">Commentaires</h2>
-        <message-list :subject-id="props.content.id">
+        <message-list :subject-id="props.content.id" :messages="messages">
         </message-list>
       </div>
       
       <div class="border-t-2 border-gray-300 mt-4 pt-4">
-        <post-message :subject-id="props.content.id">
+        <post-message :subject-id="props.content.id" @message-posted="addMessage">
         </post-message>
       </div>
       
@@ -62,10 +62,10 @@
 
 <script setup>
 
-import {defineProps, computed} from 'vue';
+import {defineProps, computed, reactive} from 'vue';
+import {time_ago} from "@/internal_time_ago.js";
 import MessageList from "@/views/messages/MessageList.vue";
 import PostMessage from "@/views/messages/PostMessage.vue";
-import {time_ago} from "@/internal_time_ago.js";
 
 const isHttpUrl = computed(() => props.content?.uri?.startsWith('http'))
 
@@ -76,4 +76,13 @@ const props = defineProps({
   }
 });
 
+const messages = reactive([]);
+
+function addMessage(newMessage) {
+  console.table(newMessage, 'test')
+  console.table(messages)
+  messages.unshift(newMessage)
+  console.table(messages)
+}
+
 </script>