Svelte商店更新,但用户界面没有反应

我遇到了一个问题,我已经确认商店已经更新,但UI并没有像我预期的那样运行。如果我重新加载页面,更新就会出现,所以我认为这是我呈现它的方式的问题。有人知道我在这个代码中做错了什么吗?

单击按钮即可更新下面的“占领者”属性,完成更新:

Game.svelte

function attemptMove() {
if( attemptedCommand.hero !== null && 
    attemptedCommand.command !== '' && 
    attemptedCommand.targetX !== -1 && 
    attemptedCommand.targetY !== -1) {
      console.log(`Attempting to process ${attemptedCommand.command} of ${attemptedCommand.hero.hero.id} at [${attemptedCommand.targetX}, ${attemptedCommand.targetY}]`)
        if(attemptedCommand.command.toLowerCase() === 'move') {
          console.log($gameStore.map[attemptedCommand.targetX][attemptedCommand.targetY])
          gameStore.update((gameStore) => {
            const updatedMap = [...gameStore.map];
            updatedMap[attemptedCommand.targetX][attemptedCommand.targetY].occupiedBy = attemptedCommand.hero.hero;
            return {...gameStore, map: updatedMap };
          })
          console.log('Updated the map')
        }    

    }
}

<div class="game-area col-span-2 ml-36 mt-28">
    <div class="normal-map">
      {#each $gameStore.map as row, rowIndex }
      <div class="grid grid-cols-[96px,96px,96px,96px,96px,96px,96px,96px,96px,96px]" key={rowIndex}>
        {#each row as cell, cellIndex}
          <div class="cell scale-[3]" key={cellIndex} >
          <InteractiveMapTile background={cell.background} onClick={mapClick} {rowIndex} {cellIndex} character={cell.occupiedBy}/>
          </div>
        {/each}
      </div>
    {/each}
  </div>
  </div>

GmaeStore.js

// Create the writable store
export const gameStore = writable(initialData);

// Subscribe to changes in the store and update local storage
gameStore.subscribe((data) => {
  writeToLocalStorage(data);
});