Updating derived doesn't trigger reactivity.

[HighFunctioningSociopathSH]

Describe the bug

I know we recently got the ability to change $derived variables, which allowed for things such as optimistic updates. I love the idea but what's the point if it isn't going to trigger reactivity?

Reproduction

<script lang="ts">
  let name = $state("Sherlock");
  let object = $derived({
    name,
  });
</script>

<button onclick={() => (object.name = "Holmes")}>change name</button>
<div>{object.name}</div>

Repo

Svelte version => svelte@5.37.1

Logs

System Info

System:
    OS: Windows 11 10.0.26100
    CPU: (16) x64 12th Gen Intel(R) Core(TM) i7-12650H
    Memory: 8.02 GB / 15.63 GB
  Binaries:
    Node: 23.11.0 - C:\nvm4w\nodejs\node.EXE
    npm: 11.4.1 - C:\nvm4w\nodejs\npm.CMD
    pnpm: 10.13.1 - C:\nvm4w\nodejs\pnpm.CMD
  Browsers:
    Edge: Chromium (136.0.3240.64)
    Internet Explorer: 11.0.26100.1882

Severity

annoyance

[paoloricciuti]

That's expected because derived are not proxied. In this case you are mutating a property on the derived, not reassigning it. You can fix this in two ways:

By reassigning the whole derived

<script lang="ts">
  let name = $state("Sherlock");
  let object = $derived({
    name,
  });
</script>

<button onclick={() => (object = { name: "Holmes" })}>change name</button>
<div>{object.name}</div>

Or by converting the derived in a derived.by and creating state within it

<script lang="ts">
  let name = $state("Sherlock");
  let object = $derived.by(()=>{
    let ret = $state({ name });
    return ret;
  });
</script>

<button onclick={() => (object.name = "Holmes")}>change name</button>
<div>{object.name}</div>