Svelte 5 Runes - unable to bind child component props directly to parent component props

Question

In Svelte 5, using Runes syntax, I'm trying to bind a prop from a child component to the prop of a parent component directly.

The only way I am able to get this to work is by creating a local state variable in the parent and updating the local state value first, before updating the prop with the local state value.

I did not have to do this in Svelte 4 and this seems unnecessarily wordy and clunky.

What am I missing?

Example working binding:

<script>
   let { someProp = $bindable() } = $props();

   let localPropState = $state(someProp);

   $effect(() => {
       someProp = localPropState;
   });
</script>

<ChildComponent bind:localPropState />

Example not working binding:

<script>
   let { someProp = $bindable() } = $props();
</script>

<ChildComponent bind:someProp />

Answer 1

The problem was that further up the component tree someProp was still being set as Svelte 4 $writable instead of Svelte 5 $state.