diff --git a/apps/svelte.dev/content/tutorial/03-sveltekit/07-api-routes/03-other-handlers/+assets/app-b/src/routes/+page.svelte b/apps/svelte.dev/content/tutorial/03-sveltekit/07-api-routes/03-other-handlers/+assets/app-b/src/routes/+page.svelte
index ce0b7d145..3680fdfdd 100644
--- a/apps/svelte.dev/content/tutorial/03-sveltekit/07-api-routes/03-other-handlers/+assets/app-b/src/routes/+page.svelte
+++ b/apps/svelte.dev/content/tutorial/03-sveltekit/07-api-routes/03-other-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 = '';
 			}}
 		/>
@@ -63,7 +65,9 @@
 								method: 'DELETE'
 							});
 
-							data.todos = data.todos.filter((t) => t !== todo);
+							const todos = data.todos.filter((t) => t !== todo);
+
+							data = { ...data, todos };
 						}}
 					></button>
 				</label>
diff --git a/apps/svelte.dev/content/tutorial/03-sveltekit/07-api-routes/03-other-handlers/index.md b/apps/svelte.dev/content/tutorial/03-sveltekit/07-api-routes/03-other-handlers/index.md
index eb0d345a4..56eb0405e 100644
--- a/apps/svelte.dev/content/tutorial/03-sveltekit/07-api-routes/03-other-handlers/index.md
+++ b/apps/svelte.dev/content/tutorial/03-sveltekit/07-api-routes/03-other-handlers/index.md
@@ -54,7 +54,9 @@ We can now interact with this endpoint inside our event handlers:
 				method: 'DELETE'
 			});
 
-			data.todos = data.todos.filter((t) => t !== todo);+++
+			const todos = data.todos.filter((t) => t !== todo);
+
+			data = { ...data, todos };+++
 		}}
 	></button>
 </label>