Data returned from load function is stateless

[theobbb]

Describe the bug

I've been using @5.0.0-next.166 and installing any newer versions that I've tested (167-169, 196-198) breaks the data props reactivity returned from load function. It's as if the returned data no longer acts as a state rune. I don't know if that behaviour is intended but I feel like the version 166 is extremely more powerful.

Reproduction

+page.ts

export function load() {
	return {
		n: 0
	};
}

+page.svelte

<script>
	const { data } = $props();
</script>

<button onclick={() => {data.n++}}>click</button>

{data.n}

Here, clicking the button doesn't update {data.n}

Logs

No response

System Info

System:
    OS: Windows 11 10.0.22631
    CPU: (16) x64 AMD Ryzen 7 5700X 8-Core Processor
    Memory: 5.25 GB / 15.93 GB
  Binaries:
    Node: 20.11.1 - D:\Program Files\nodejs\node.EXE
    Yarn: 1.22.10 - ~\AppData\Roaming\npm\yarn.CMD
    npm: 10.2.4 - D:\Program Files\nodejs\npm.CMD
  Browsers:
    Chrome: 126.0.6478.183
    Edge: Chromium (126.0.2592.113)
    Internet Explorer: 11.0.22621.3527
  npmPackages:
    svelte: ^5.0.0-next.198 => 5.0.0-next.198

Severity

blocking an upgrade

[pheuter]

This is intentional, since data is a prop and props should not be modified unless they're explicitly made $bindable(). A common pattern is to initialize state from props that you expect to mutate:

<script>
    let { data } = $props();
    let n = $state(data.n);
</script>

[theobbb]

Thank you for your quick answer!
Perfect, it makes sense.