applyMatchesUpdates does not update div in Vue?

[OleVoss]

I use bracketry in a Vue component like this:

<script>
const props = defineProps<{
    stageId: string | number;
    knockoutStandings: KnockoutStandings;
}>();

const bracket = ref();
onMounted(() => {
    const wrapper = document.querySelector('#bracketry-wrapper');
    if (wrapper) {
        bracket.value = createBracket(data, wrapper, options);
        console.log(bracket.value);
    }
});
</script>

<template>
    <div class="h-full w-full p-4" id="bracketry-wrapper"></div>
</template>

It is working as expected. But, I also use echo to listen to real-time updates to the standings:

useEcho<{ standings: KnockoutStandings }>(`stages.${props.stageId}.standings`, 'StageStandingsUpdate', (e) => {
    const newMatches = getMatchesFromStandings(e.standings);
    bracket.value.applyMatchesUpdates(newMatches);
});

I do get these updates, but when applied, nothing changes. Do you have any idea what I am missing? This could be something within Vue etc. as I am fairly new to the framework.

As these updates are not occuring that oftern, I could also just recreate the component on every update but I would like to avoid that.

[OleVoss]

Nvm, got it to work. I think it was an Vue issue.
This is what I added:

// SimpleBracketViz.vue
const wrapperKey = ref(0);
watch(
    () => props.knockoutStandings,
    async () => {
        wrapperKey.value++; // force DOM recreation
        await nextTick();
        initBracket();
    },
    { deep: true },
);

<template>
    <div :key="wrapperKey" id="bracketry-wrapper" class="h-full w-full"></div>
</template>

I also moved the echo subscription out of the component:

// KnockoutStandings.vue
const props = defineProps<{
    stage: Stage;
    standings: KnockoutStandings;
}>();

const standings = ref(props.standings);

useEcho<{ standings: KnockoutStandings }>(`stages.${props.stage.id}.standings`, 'StageStandingsUpdate', (e) => {
    standings.value = e.standings;
});

</script>

<template>
    <SimpleBracketViz :knockoutStandings="standings"></SimpleBracketViz>
</template