svelte 5: can't modify an array passed as a prop to a child component

[wires5210]

Describe the bug

if i pass an array declared with $state to another component, then try to modify it, i get an error saying:

Non-bound props cannot be mutated — to make the `0` settable, ensure the object it is used within is bound as a prop `bind:={...}`. Fallback values can never be mutated.

it works if i use bind:, but as far as i understand, bind: is supposed to be used for when the child component is expected to modify the prop - the error above happens even if the array is modified in the parent component

this happens whether the array is modified with methods like .push(element), or through reassignment like array = [...array, element]. though the latter works when using $state.frozen instead of $state when declaring the array

Reproduction

repl link

• App.svelte:

  <script>
    import Child from './Child.svelte';
  
      let array = $state([1,2,3,4]);
  
      const addNew = () => {
    	  array.push(0)
      }
  </script>
  
  <button onclick={addNew}>add</button>
  <Child {array} />

• Child.svelte:

  <script>
      let { array } = $props();
  </script>
  
  {#each array as number}
      <p>{number}</p>
  {/each}

Logs

No response

System Info

mac os/chrome

Severity

annoyance

[dummdidumm]

There's something inside the each block logic which writes to the user array which then fails. It's related to the lazy_property logic that was added for proxies.

[ptrxyz]

Funny enough that when you make it a keyed each block it works:

// all good
{#each array as number (number)}
...
// not good
{#each array as number}

[dummdidumm]

Fixed by #10422