$bindable and propagation don't seem work

I'm building a nested tree of objects. This is the structure:

    ID: string;    indexes: number[];    title: string;    validated: boolean;    column: DescriptionElement[];    children: Paragraph[];

I want to create a new div for every child inside children. I have 2 components:

• SvelteDocument
• SvelteParagraph

Inside SvelteDocuments I have a state which is an array of Paragraph. I'm passing the array like this

<div>  {#each paragraphs as paragraph, index (index)}<SvelteParagraph bind:paragraph={paragraphs[index]} disabled={false} />  {/each}</div>

Inside SvelteParagraph we get the props of paragraph:

let { paragraph = $bindable() } = $props();

Inside SvelteParagraph whe show the paragraph children like above and we also have a function to add a chil to the current paragraph which is just a push on the prop () => paragraph.children.push(...)

The problem is that we can see the state updated through an $effect inside the console log but we cannot see any changes in the UI unless we reload from the terminal.

We tried using props, bindable and state combined in different ways, but always the same problem: the state changes but no changes in the UI.