Let’s suppose I have this as main page:

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

    let person = { name: "" };
</script>

<Child {person} />

And this as a child:

<script>
    export let person;

    let name;
    $: name = person.name;
</script>

<input bind:value={name} />

You can try it here.

The reason I don’t directly bind person.name is because I don’t want to mutate parent objects at all, I prefer to throw an event.

I expected to be able to modify the name variable of the child component by typing values in the input. A modification in the parent element However it doesn’t work at all, because the input remains empty whatever I type in it.

After having created this minimal example and put console.log everywhere, it seems that the line $: name = person.name is triggered right after I type something in the input field, while it shouldn’t because person.name doesn’t change, the assigned variable does.

It is surely very easy but I can’t understand why this behaviour happens, so thanks in advance for any help