Content of new node being replaced by existing node

[just-tom]

trafficstars

Describe the bug

Hi all,

I have a weird situation whereby when I add a new message/nodes to the end of my array the content showing is actually the content of another message somewhere else in the stack and not the message that I sent. However I can see in dev tools that the content of the latest node is correct.

I am assuming this is down to the virtualisation side, of which Im not too familiar, so probably something relatively simple to fix given the correct knowledge.

https://github.com/Akryum/vue-virtual-scroller/assets/12802934/8713b3ad-c98f-4dca-8f9b-ed71088d52bd

Reproduction

Heres the code as it stands. im using tailwind so you can see all styles applied:

<DynamicScroller
                v-if="messages.length"
                ref="scroller"
                :items="messages"
                :min-item-size="66"
                key-field="id"
                class=" px-2"
                :class="[pinnedMessage ? 'h-[36rem]' : 'h-[41.5rem]' ]"
            >
                <template v-slot="{ item, index, active }">
                    <DynamicScrollerItem
                        :item="item"
                        :active="active"
                        :size-dependencies="[item.text, item.reaction_counts]"
                        :data-index="index"
                        class=""
                    >
                        <Message :current-message="item" :stream-chat-channel="streamChatChannel" @show-mute-modal="showMuteModal = true" @show-block-modal="showBlockModal = true" @show-report-modal="showReportModal = true"/>
                    </DynamicScrollerItem>
                </template>
            </DynamicScroller>

Here is the code that updates messages:

onMounted(async () => {
    const channels = await streamChatInstance.queryChannels({id: props.stage.id}, [{last_updated: -1}], {
        watch: false,
    });
    streamChatChannel.value = channels[0];
    await streamChatChannel.value.watch();
    messages.value = streamChatChannel.value.state.messageSets[0].messages

    streamChatChannel.value.on('message.new', (event) => {
        scroller.value.scrollToBottom()
        messages.value = streamChatChannel.value.state.messageSets[0].messages
        scroller.value.forceUpdate();

    })

    streamChatChannel.value.on('message.updated', (event) => {
        messages.value = streamChatChannel.value.state.messageSets[0].messages
        scroller.value.forceUpdate();
    })
})

System Info

N/A

Used Package Manager

npm

Validations

• [X] Read the docs.
• [X] Check that there isn't already an issue that reports the same bug to avoid creating a duplicate.
• [X] Check that this is a concrete bug. For Q&A open a GitHub Discussion.
• [X] The provided reproduction is a minimal reproducible example of the bug.