When adding a comments, it is visible on the client

src/views/messages/MessageList.vue

@@ -45,13 +45,16 @@ const props = defineProps({
   subjectId: {
     type: String,
     required: true
+  },
+  messages: {
+    default: []
   }
 });
 
 const errorMessage = ref()
 let last_id = null
 const client = useClient();
-const messages = ref([]);
+const messages = ref(props.messages);
 
 onBeforeMount(async () => {
   if (props.subjectId == null) return

src/views/messages/PostMessage.vue

@@ -13,7 +13,7 @@
       </div>
 
       <v-text-field
-          v-model="message"
+          v-model="value"
           density="compact"
           variant="solo-inverted"
           placeholder="Votre commentaire..."
@@ -35,7 +35,9 @@
 <script setup>
 
 import {useClient} from '@/plugins/api.js';
-import {defineProps, ref} from 'vue';
+import {defineEmits, defineProps, ref} from 'vue';
+import {useUserStore} from "@/stores/user.js";
+import {v7} from 'uuid'
 
 const props = defineProps({
   subjectId: {
@@ -44,16 +46,34 @@ const props = defineProps({
   }
 });
 
+const emit = defineEmits(['message-posted']);
+
 const client = useClient();
-const message = ref("");
+const value = ref("");
+const user = useUserStore();
 
 const publish = async () => {
-  await client.post(
-      `/api/messages/`,
-      {
-        "subjectId": props.subjectId,
-        "message": message.value
-      });
+
+  try {
+    const messageId = v7()
+    await client.post(`/api/messages/`,
+        {
+          "id": messageId,
+          "subjectId": props.subjectId,
+          "message": value.value
+        })
+    emit('message-posted',
+        {
+          "id": messageId,
+          "subjectId": props.subjectId,
+          "createdBy": user.getCurrentUser().id,
+          "createdAt": new Date(Date.now()).toISOString(),
+          "value": value.value,
+          parentId: null,
+        })
+  } catch (error) {
+    console.error(`post api/message : ${error}`)
+  }
 }
 
 </script>