Use the toggle attribute of the Todo components

site/content/examples/21-miscellaneous/02-immutable-data/App.svelte

@@ -29,10 +29,10 @@
 
 <h2>Immutable</h2>
 {#each todos as todo}
-	<ImmutableTodo {todo} on:click="{() => toggle(todo.id)}"/>
+	<ImmutableTodo {todo} toggle={() => toggle(todo.id)}/>
 {/each}
 
 <h2>Mutable</h2>
 {#each todos as todo}
-	<MutableTodo {todo} on:click="{() => toggle(todo.id)}"/>
+	<MutableTodo {todo} toggle={() => toggle(todo.id)}/>
 {/each}

site/content/examples/21-miscellaneous/02-immutable-data/ImmutableTodo.svelte

@@ -23,6 +23,6 @@
 
 <!-- the text will flash red whenever
 		the `todo` object changes -->
-<div bind:this={div} on:click>
+<div bind:this={div} on:click={toggle}>
 	{todo.done ? '👍': ''} {todo.text}
 </div>

site/content/examples/21-miscellaneous/02-immutable-data/MutableTodo.svelte

@@ -21,6 +21,6 @@
 
 <!-- the text will flash red whenever
 		the `todo` object changes -->
-<div bind:this={div} on:click>
+<div bind:this={div} on:click={toggle}>
 	{todo.done ? '👍': ''} {todo.text}
 </div>