Svelte TreeView not update when store data updates

Question

I need to represent my data in a tree view and use as base the TreeView from svelte.

What I figured out is that if the TreeView data changed, the html will not rerender the tree. The data object is updated but not the html.

I create a new sample based on the original:
Playground

What I currently need to do is to clear the store and with a ms timeout set the new data:

const updateHacky = () => { 
    writableArray.set([])
    setTimeout(() => {
        writableArray.set([updateData])
    }, 1);
}

but what I expect is that on

writableArray.update(() => [updateData]);

the UI updates.

Answer 1

The problem is with this code in TreeView.svelte:

export let tree
const {label, children} = tree

The second line is only executed once - when the component is created. This means that when the component receives a new tree value, label and children don't get updated.

You can fix it by writing this instead:

export let tree
$: ({ label, children } = tree)