Using a $state variable in an inner object of derived strips reactivity

[Spartan1776]

Describe the bug

Hello,

It appears that when creating an object with $derived that contains an inner object where a field is from a $state variable, the access is no longer reactive.

Reproduction

https://svelte.dev/playground/untitled?version=5.39.3#H4sIAAAAAAAAE6WQwW7CMBBEf8VacQCpCqJHkyD1I3rCHJx4aS3MYsVLoIr876wTDhy49WTNjHee1yOQPSNo-Cb2HNDBBxx9wAR6PwL_xZIVQ_znza8YqzRg4OK1NuE7v7sQI7HUQJ263kdWwdJPY4CTgZ0hIzBWjIk3qlGLxJZxyf0VV9vX8LOEDns_oFuOJTHsibDX6qkMDzbouWl2cjnyylC9ntEFR7WneJVSWUle0f1id2ovdwOq9eT0pNE14wStJkQlxVmtd_-Zla9gvDPoslo-iLI-3GQK9NGGhPkBhGw9LIEBAAA

Logs

System Info

System:
    OS: macOS 14.6.1
    CPU: (16) arm64 Apple M3 Max
    Memory: 30.92 GB / 128.00 GB
    Shell: 4.0.2 - /opt/homebrew/Cellar/fish/4.0.2/bin/fish
  Binaries:
    Node: 24.1.0 - /opt/homebrew/bin/node
    npm: 11.3.0 - /opt/homebrew/bin/npm
    pnpm: 10.15.1 - /opt/homebrew/bin/pnpm
  Browsers:
    Chrome: 140.0.7339.133
    Safari: 17.6
  npmPackages:
    svelte: ^5.39.3 => 5.39.3

Severity

annoyance

[sillvva]

Binding to a property of a derived object like that does not trigger the derived to rerun. And assigning a state to a property does not make that property a state or independently reactive from the rest of the derived.

Since derived is reactive, but not deeply reactive, you have to re-assign to the whole derived.

Simply put:

To get the kind of behavior you seek, you can use this workaround to make test2.inner.val reactive:

	let test2 = $derived.by(() => {
		let inner = $state({
			inner: {
				val: test1
			}
		});
		return inner;
	});

[Spartan1776]

Hey, thanks so much for the explanation! I had no idea I could use the state rune within a derived.by -- to make sure I'm understanding this correctly, derived only inherits the reactivity at the top level and does not inherit reactivity wherever you use a state variable?

[sillvva]

Correct. Assigning a state to a derived property does not make that property a reactive state. The whole object must be a state to make it deeply reactive like that. And then you can wrap it in derived by to have a property that depends on another piece of state.

Example: https://svelte.dev/playground/untitled?version=5.39.3#H4sIAAAAAAAAE6WQwU7EMAxEfyWyOHSlqiv2GNpKfAQnwiFtvRARvFUyLbuq-u8oKQscuCBu8RuPx_FCYt-YND0IHDwPVNLReY6kHxfCZUxaAlReO-_HsYozeyTW2ci_8f4kYEEkTXXsgxuhvJXnxhCiodaIgWcocMStatRNhAUXCBPv7n6KhyQOHNzMQ9VdimKnmlYtqWVrciIcvid8KgaZa_VVG8zW6y3wytbtsW6RBoExBdlGZpSVer99IC0ttZNxgkqHaQz1L9y_dqezIdU5GXSueWiWHLOqfVt3of2T61Dl-Gq2Pvn_46WSwGeQTmddn0qCdf7dyUD6aH3k9QN-mi9g_QEAAA

[Spartan1776]

That's awesome--thank you so much!!