docs: fix `$effect.pre` code example (#12444)

closes #12439

documentation/docs/03-runes/02-side-effects.md

@@ -245,16 +245,16 @@ In rare cases, you may need to run code _before_ the DOM updates. For this we ca
 <script>
 	import { tick } from 'svelte';
 
-	let div;
-	let messages = [];
+	let div = $state();
+	let messages = $state([]);
 
 	// ...
 
 	$effect.pre(() => {
 		if (!div) return; // not yet mounted
 
-		// reference `messages` so that this code re-runs whenever it changes
-		messages;
+		// reference `messages` array length so that this code re-runs whenever it changes
+		messages.length;
 
 		// autoscroll when new messages are added
 		if (div.offsetHeight + div.scrollTop > div.scrollHeight - 20) {

sites/svelte-5-preview/src/routes/docs/content/01-api/02-runes.md

@@ -453,16 +453,16 @@ In rare cases, you may need to run code _before_ the DOM updates. For this we ca
 <script>
 	import { tick } from 'svelte';
 
-	let div;
-	let messages = [];
+	let div = $state();
+	let messages = $state([]);
 
 	// ...
 
 	$effect.pre(() => {
 		if (!div) return; // not yet mounted
 
-		// reference `messages` so that this code re-runs whenever it changes
-		messages;
+		// reference `messages` array length so that this code re-runs whenever it changes
+		messages.length;
 
 		// autoscroll when new messages are added
 		if (