Svelte中绑定变量属性变更时如何触发$effect()？

我有一个与父组件正确绑定的变量，点击时其值会变化，且该值在父组件和绑定的子组件中都能正确显示。

代码示例 #

+page.svelte #

<script lang='ts'>
    import Foo from './Foo.svelte'
    
    let page = $state({value:12});  
    
    $effect(() => {
        console.log("Updating page: ", $inspect(page));
    });
</script>

<div>
  <Foo bind:page={page} />
    App page is {page.value}
</div>

Foo.svelte（子组件） #

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

<button onclick={() => page.value = page.value+1}>
    Value in Foo is {page.value}: click me
</button>
<br/>

问题 #

尽管页面会随着page.value的变化重新渲染，但监听该变量的$effect()并未触发。我需要检测page的变化来实现自动保存数据的功能，目前无法获取到变化通知。

补充：将page存入store同样需要检测变化，且由于对象包含数十个字段，我不想手动触发事件，有没有更合适的解决办法？

现有解决方案 #

基于brunnerh的回答：

仅引用对象不会触发任何操作（除非发生变量的重新赋值）。

尝试了一种看似笨拙但有效的方法，现在$effect可以被触发：

$effect(() => {
    console.log("Updating page: ", $inspect(page));
    autoSave.update(page = {...page})
});

不过这种方式非常违反直觉，不够明确。如果有能“即使无写入操作也强制触发effect”的方法，会更容易理解。

内容的提问来源于stack exchange，提问作者Zied Hamdi