Data returned from load function doesnt update

[theobbb]

I can't understand why my data in +page.svelte doesnt update when the one in +page.ts does.

Routing structure

[id]
-- +page.ts
-- +page.svelte

+page.ts

const data = [{}, {}];

export function load({ params }) {
	data.forEach((d) => {
		d.prop = params.id;
	});

	console.log(data);

	return { arr: data };
}

+page.svelte

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

{#each data.arr as e}
	<p>{e.prop}</p>
{/each}

<a href="/1">link 1</a>
<a href="/2">link 2</a>

I can see that the load function runs on param change and that the data is correctly modified. But in +page.svelte the data doesnt change. In my use case, the data used is the load function is from await parent(), but even with this minimal demo I can't get it to work. Any help is really appreciated. Thank you.

[CaptainCodeman]

It maybe todo with the original data being mutated, combined with runes.

Ideally load functions should be pure - changing it to this works:

const data = [{}, {}]

export function load({ params }) {
	const arr = data.map(x => ({
		prop: params.id,
	}))

	console.log(arr)

	return {
		arr,
	}
}

[bolstycjw]

refer to #4941, this is an expected behavior of sveltekit which isn't very well-documented, but falls inline with what you would expect of SPA apps.