Object Property Changes Within Array Not Reflecting in UI

[DDuran19]

Describe the bug

Need to have reactivity in nested objects inside an array

Bug Description:
In a Svelte component, when modifying a property of an object within an array, the UI does not reflect the change, even though the data is updated as observed in the console. This issue occurs when iterating over the array and binding input fields to properties of its objects.

Steps to Reproduce:

1. Create a Svelte component with an array of objects stored in a reactive $state.
2. Use #each to iterate through the array and display each object’s property along with an input field bound to a property of the object (e.g., item.value).
3. Modify the input field to change the object's property value.
4. Observe that the console logs correctly show the changes, but the UI does not update accordingly.

Expected Behavior:

The changes to the value property of the objects in the array should be reflected in the UI immediately when updated.

Actual Behavior:

Changes to the value property are not reflected in the UI despite the updated state being visible in the console. Reactive updates do not seem to propagate correctly for objects inside an array.

Reproduction

Write this in Svelte playground
link

<script>
	let items = $state([
  {
    id: "0A7ox",
    formId: "field_1",
    value: "",
  },
  {
    id: "Dh_bH",
    formId: "field_2",
    value: "",
  }
]);

	
let value = $state({name: ""});
$inspect(items);
</script>
<ul>
	
{#each items as item}
	<li>
	{item.id} - {item.name} <!-- The console shows item.name changes as you type on the input, but the changes aren't being reflected in the UI -->
		<input type="text" bind:value={item.value} />
	</li>
{/each}

</ul>
{value.name}  <!-- but this one works -->
<input bind:value={value.name}/>

Logs

System Info

$ npx envinfo --system --npmPackages svelte,rollup,webpack --binaries --browsers

  System:
    OS: Windows 10 10.0.19045
    CPU: (8) x64 AMD Ryzen 5 2400G with Radeon Vega Graphics    
    Memory: 16.85 GB / 29.95 GB
  Binaries:
    Node: 20.16.0 - C:\Program Files\nodejs\node.EXE
    npm: 10.9.0 - C:\Program Files\nodejs\npm.CMD
    pnpm: 8.11.0 - ~\AppData\Roaming\npm\pnpm.CMD
    bun: 1.1.0 - ~\.bun\bin\bun.EXE
  Browsers:
    Edge: Chromium (127.0.2651.74)
    Internet Explorer: 11.0.19041.4355
  npmPackages:
    svelte: ^5.17.4 => 5.17.4

Severity

blocking an upgrade

[leonidaz]

this is just a typo in your code:

{item.id} - {item.name}

should be:

{item.id} - {item.value}

as there is no name in the props of the objects in the array

[DDuran19]

O my goodness, you're right!! Sorry