Room list as slot does not update order after sorting?

[abbjetmus]

Describe the bug

I'm providing a custom room-list as slot. When a new message is created in one of the rooms i sort the room-list so that the room with the latest message is at top. I reassign the the room list but it doesn't get updated. I'm doing something wrong here?

Steps to reproduce

<template>
    <div
        class="window-container full-height"
        :class="{ 'window-mobile': isDevice }"
    >
        <vue-advanced-chat
            ref="chatWindow"
            :height="'100%'"
            :theme="theme"
            :styles="JSON.stringify(styles)"
            :current-user-id="currentUserId"
            :room-id="roomId"
            :rooms="rooms"
            :loading-rooms="loadingRooms"
            :rooms-loaded="roomsLoaded"
            :load-first-room="false"
            :show-audio="false"
            :show-files="false"
            :text-messages="
                JSON.stringify({
                    ROOMS_EMPTY: 'Inga konversationer',
                    ROOM_EMPTY: 'Ingen vald konversation',
                    NEW_MESSAGES: 'Nya meddelanden',
                    MESSAGE_DELETED: 'Detta meddelande har raderats',
                    MESSAGES_EMPTY: 'Inga meddelanden',
                    CONVERSATION_STARTED: 'Konversationen startade den:',
                    TYPE_MESSAGE: 'Skriv ditt meddelande',
                    SEARCH: 'Sök',
                    IS_ONLINE: 'är online',
                    LAST_SEEN: 'senast sedd ',
                    IS_TYPING: 'skriver...',
                    CANCEL_SELECT_MESSAGE: 'Avbryt val',
                })
            "
            :show-emojis="false"
            :show-reaction-emojis="false"
            :messages="messages"
            :messages-loaded="messagesLoaded"
            :room-message="roomMessage"
            :rooms-list-opened="dataStore.roomsListOpened"
            :room-actions="JSON.stringify(roomActions)"
            :menu-actions="JSON.stringify(menuActions)"
            :message-selection-actions="JSON.stringify(messageSelectionActions)"
            :message-actions="JSON.stringify(messageSelectionActions)"
            @fetch-more-rooms="fetchMoreRooms"
            @fetch-messages="fetchMessages($event.detail[0])"
            @send-message="sendMessage($event.detail[0])"
            @delete-message="deleteMessage($event.detail[0])"
            @room-action-handler="menuActionHandler($event.detail[0])"
            @menu-action-handler="menuActionHandler($event.detail[0])"
            @message-selection-action-handler="
                messageSelectionActionHandler($event.detail[0])
            "
            @message-action-handler="messageActionHandler($event.detail[0])"
            @typing-message="typingMessage($event.detail[0])"
        >
            <div
                v-for="room in rooms"
                :key="room.id"
                :slot="`room-list-item_${room.id}`"
                class="full-width"
            >
                <q-item
                    @click="toggleRoomsList"
                    clickable
                    no-hover
                    class="q-pa-none q-my-none item--no-hover"
                >
                    <q-item-section top avatar class="q-pa-none q-ma-none">
                        <q-avatar square>
                            <img :src="room.avatar" />
                        </q-avatar>
                    </q-item-section>

                    <q-item-section>
                        <q-item-label lines="1">{{
                            room.roomName
                        }}</q-item-label>
                        <q-item-label caption lines="2">
                            <div class="truncate">
                                {{
                                    room.lastMessage.firstName
                                        ? `${room.lastMessage.firstName}:`
                                        : ""
                                }}
                                {{ room.lastMessage.content ?? "" }}
                            </div></q-item-label
                        >
                    </q-item-section>

                    <q-item-section side>
                        <q-item-label caption>
                            {{ room.lastMessage.time ?? "" }}
                        </q-item-label>
                    </q-item-section>
                </q-item>
            </div>
        </vue-advanced-chat>
    </div>
</template>
<script setup>
signalr.on("onNewMessage", (message) => {
    const room = rooms.value.find((r) => r.id == message.roomId);
    const temp = [...messages.value];
    const formattedMessage = formatMessage(room, message);
    temp.push(formattedMessage);
    messages.value = temp;

    const lastMessage = formatLastMessage(message, room);

    const roomIndex = rooms.value.findIndex((r) => room.roomId === r.roomId);
    rooms.value[roomIndex].lastMessage = lastMessage;
    rooms.value[roomIndex].lastUpdated = message.timestamp;

    // reassign rooms after sorting
    rooms.value = [
        ...rooms.value.sort((a, b) => {
            if (a.lastUpdated == null) return -1;
            if (b.lastUpdated == null) return 1;
            return new Date(b.lastUpdated) - new Date(a.lastUpdated);
        }),
    ];
});
</script>

Expected behavior

Would like the list to update