diff --git a/apps/svelte.dev/content/tutorial/03-sveltekit/07-api-routes/02-post-handlers/+assets/app-b/src/routes/+page.svelte b/apps/svelte.dev/content/tutorial/03-sveltekit/07-api-routes/02-post-handlers/+assets/app-b/src/routes/+page.svelte
index 89ff6d39b..185eff222 100644
--- a/apps/svelte.dev/content/tutorial/03-sveltekit/07-api-routes/02-post-handlers/+assets/app-b/src/routes/+page.svelte
+++ b/apps/svelte.dev/content/tutorial/03-sveltekit/07-api-routes/02-post-handlers/+assets/app-b/src/routes/+page.svelte
@@ -1,5 +1,5 @@
 <script>
-	let { data = $bindable() } = $props();
+	let { data } = $props();
 </script>
 
 <div class="centered">
@@ -26,11 +26,13 @@
 
 				const { id } = await response.json();
 
-				data.todos = [...data.todos, {
+				const todos = [...data.todos, {
 					id,
 					description
 				}];
 
+				data = { ...data, todos };
+
 				input.value = '';
 			}}
 		/>
diff --git a/apps/svelte.dev/content/tutorial/03-sveltekit/07-api-routes/02-post-handlers/index.md b/apps/svelte.dev/content/tutorial/03-sveltekit/07-api-routes/02-post-handlers/index.md
index 3a83537f0..8a44b9daf 100644
--- a/apps/svelte.dev/content/tutorial/03-sveltekit/07-api-routes/02-post-handlers/index.md
+++ b/apps/svelte.dev/content/tutorial/03-sveltekit/07-api-routes/02-post-handlers/index.md
@@ -74,14 +74,16 @@ We're returning a response with a [201 Created](https://http.dog/201) status and
 
 +++		const { id } = await response.json();
 
-		data.todos = [...data.todos, {
+		const todos = [...data.todos, {
 			id,
 			description
-		}];+++
+		}];
+
+		data = { ...data, todos };+++
 
 		input.value = '';
 	}}
 />
 ```
 
-> [!NOTE] You should only mutate `data` in such a way that you'd get the same result by reloading the page.
+> [!NOTE] You should only update `data` in such a way that you'd get the same result by reloading the page. The `data` prop is not _deeply_ reactive, so you need to replace it — mutations like `data.todos = todos` will not cause a re-render.