svelte - Svelte ストア: forEach ループで更新された値は動的に更新されません (ただし、変更されます)

Question

最小限の作業例は次のとおりです。

レプリカ: https://svelte.dev/repl/ed0fb480159849458c2878d2210e9a40

コード：

App.svelte:

<script>
    import { array } from './store.js';
    import Child from './Child.svelte'
    
    
    function classicLoop() {
    for (let i=0;i<$array.length; i++) {
        $array[i].value ++
    }
    }
    
    function forEachLoop() {
    let i = 0
        $array.forEach(el => {
        el.value ++;
        console.log('loop element:',el);
        console.log('store element:',$array[i]);
        i++
    })
    }
</script>

<button on:click={classicLoop}>
    Classic loop
</button>
<button on:click={forEachLoop}>
    ForEach loop
</button>
<p>
    Items:
</p>
{#each $array as item}

<Child {item} />
{/each}

Child.svelte:

<script>
export let item;
</script>
<p>
    {item.id} -- {item.value}
</p>

store.js:

import { writable } from 'svelte/store';

export const array = writable([{id:'first',value:1},{id:'second',value:2},{id:'third',value:3}]);

問題: Svelte Store 内で Array.forEach を使用してループすると、値が更新されます (確実にコンソールに記録されます) が、動的バインディングは機能せず、変更は DOM で表示されません (ただし、値はストアで変更されます)。クラシック ループは問題なく動作します。したがって、 forEach を使用した後は何も表示されませんが、従来のループを使用すると、DOM が現在の (適切な) 値に更新されます。

だから、私はもちろん古典的なループに固執するかもしれませんが、ここで何が起こっているのか、そしてその理由を理解したいと思います:)

コメント/ヒントをいただければ幸いです。