Why is this object not updating? Do we need another rune?

[frederikhors]

Reproduction: https://svelte.dev/playground/4424d522f50847f0b872a094b7b2198b?version=5.18.0

I cannot understand why this error:

[svelte] binding_property_non_reactive
`bind:value={content.one}` (Form.svelte:5:19) is binding to a non-reactive property
https://svelte.dev/e/binding_property_non_reactive

Code:

App.svelte:

<script>
    import Form from "./Form.svelte";

    let changed = $state(false);
    
    let content = $derived({one: `hello ${changed}`, two: changed });
</script>

<Form bind:content={() => content, (v) => content = v} />

Form.svelte:

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

<input type="text" bind:value={content.one} />

[Ocean-OS]

$derived properties are not meant to be mutated, changing the $derived to a state and $derived would probably be the best way to go. If you wanted to keep it an object you could do something like this.

[frederikhors]

Thanks. But if I use let content = $state({one: hello ${changed}, two: changed }); I get these warnings:

State referenced in its own scope will never update. Did you mean to reference it inside a closure?
https://svelte.dev/e/state_referenced_locally (state_referenced_locally)
and then I cannot update the content from anotehr derived object

And then I'm forced to use $effect() right?

[frederikhors]

I saw your code, but changed is what can trigger the change of content, not the way around.

[Ocean-OS]

And then I'm forced to use $effect() right?

Yeah, it seems like you're trying to do some sort of two-way data binding between two $states, and one also has a computation derived from the other...? This seems similar to what #12956 proposed, there might be some useful info for you there.

[david-plugge]

This is likely just a design flaw in your code. Can you elaborate on what exactly you are trying to achive?

[frederikhors]

What is the flaw? Anyway the mother request is #15026.