use provider instead of props in options

front/src/views/room/RoomView.vue

@@ -1,10 +1,10 @@
 <script setup>
 import { useStore } from "vuex";
 import { useRoute, onBeforeRouteUpdate } from "vue-router";
-import { onBeforeMount, ref } from "vue";
+import { onBeforeMount, provide, ref } from "vue";
+import { RoomType } from "@/store/models/model";
 import Header from "./Header.vue";
 import Message from "../../components/structure/message/Message.vue";
-import { Room, RoomType } from "@/store/models/model";
 import MessageViewModal from "@/components/modals/MessageViewModal.vue";
 
 const store = useStore();
@@ -12,29 +12,34 @@ const route = useRoute();
 const messageIdView = ref(-1);
 const message = ref(undefined);
 const id = ref(parseInt(route.params.id));
-let room;
+let room = ref();
+
 onBeforeMount(async () => {
     store.commit("setActiveRoom", id.value);
-    room = store.getters.room(id.value);
+    room.value = store.getters.room(id.value);
+    console.log(room.value);
 });
 
 onBeforeRouteUpdate(async (to, from) => {
     if (to.params.id !== from.params.id) {
         id.value = parseInt(to.params.id);
         store.commit("setActiveRoom", id.value);
-        room = await store.getters.room(id.value);
+        room.value = await store.getters.room(id.value);
+        console.log(room.value);
     }
 });
 
 const shouldDisplayComposer = () => {
-    if (!room) return false;
-    return room.roomType == RoomType.THREAD || room.roomType == RoomType.GROUP;
+    if (!room?.value) return false;
+    return room.value.roomType == RoomType.THREAD || room.value.roomType == RoomType.GROUP;
 };
 
 function openMessageView(id) {
     messageIdView.value = id;
-    message.value = room?.messages.find((message) => message.id == id);
+    message.value = room.value?.messages.find((message) => message.id == id);
 }
+
+provide("room", room);
 </script>
 
 <template>
@@ -47,8 +52,6 @@ function openMessageView(id) {
                     :key="index"
                     :msg="message"
                     :members="room?.members"
-                    :mailboxId="room.mailboxId"
-                    :roomId="room.id"
                     @open-message-view="(id) => openMessageView(id)"
                 />
             </div>