Override derived array using push is not reactive

[Stadly]

Describe the bug

Pushing to a derived array is not reactive:

<script>
	let derived = $derived(["initial"]);
</script>

<p>{derived}</p>
<button onclick={
	() => derived.push("more") // Not reactive
}>push</button>

<button onclick={
	() => derived = [...derived, "spread"] // Reactive
}>spread</button>

Reproduction

https://svelte.dev/playground/1f9c9d543286412695fe03bdfe0ab73b?version=5.39.8

Logs

System Info

The latest Playground

Severity

annoyance

[7nik]

Deriveds never create deeply reactive variables.
Only $state creates a deeply reactive variable/value.
So, do

let derived = $derived.by(() => {
  let data = $state(["initial"]);
  return data;
});

Though in this particular case, it should be even just

let derived = $state(["initial"]);

[Ocean-OS]

Unlike $state, $deriveds are not deeply reactive— updating a property of a $derived object will not trigger any reactivity.
...just realized @7nik beat me to it 😅

[Stadly]

Makes sense! Thanks :)