Benign cyclical dependencies

Trying svelte for a new project I wrote a component to edit a compound object which delegates editing of individual parts to subcomponent and recreates the compound object whenever a part was changed. Of course, when the compound object is externally changed the subcomponents should be updated to the new values.

I ended up with the following:

<script>  
    let item = "content";
    export let holder = { item };

    $: {
        console.log("setting item to "+holder.item);
        item = holder.item;
    }

    $: setHolder(item);

    function setHolder(i) {
        console.log("setting holder for "+i);
        holder = { item: i }
    }
</script>

<input type="text" bind:value={item} />

The above compiles but the content cannot be edited as somehow when item is edited the first reactive block is executed setting the variable back to holder.item.

I don't understand the following:

• Why is the first reactive block executed? As item only appears on the left-hand-side of an assignment it is not a value it depends on.
• Why has the cyclical dependency be "hidden" from the compiler, why doesn't the following work?

    $: {
        console.log("setting item to "+holder.item);
        item = holder.item;
    }

    $: {
        console.log("setting holder for "+item);
        holder = { item }
    }

• And why does everything work when wrapping both reactive blocks into functions?

    $: setItem(holder)
    function setItem(h) {
        console.log("setting item to "+h.item);
        item = h.item;
    }

    $: setHolder(item);
    function setHolder(i) {
        console.log("setting holder for "+i);
        holder = { item: i }
    }

It seems odd to relying on the compiler somehow not seeing what the code is doing so I'm wondering if I'm having a completly wrong approach.