Add clarification on what makes a reactive block reactive to docs. (#5729)

* Add clarification on what makes a reactive block reactive to docs.

* Tweak reactive explanation

site/content/docs/01-component-format.md

@@ -130,6 +130,32 @@ Any top-level statement (i.e. not inside a block or a function) can be made reac
 
 ---
 
+Only values which directly appear within the `$:` block will become dependencies of the reactive statement. For example, in the code below `total` will only update when `x` changes, but not `y`.
+
+```sv
+<script>
+	let x = 0;
+	let y = 0;
+	
+	function yPlusAValue(value) {
+		return value + y;
+	}
+	
+	$: total = yPlusAValue(x);
+</script>
+
+Total: {total}
+<button on:click={() => x++}>
+	Increment X
+</button>
+
+<button on:click={() => y++}>
+	Increment Y
+</button>
+```
+
+---
+
 If a statement consists entirely of an assignment to an undeclared variable, Svelte will inject a `let` declaration on your behalf.
 
 ```sv