docs: add derived proxy state (refer to #16189 for context)

Author: aster-void

documentation/docs/02-runes/03-$derived.md

@@ -85,14 +85,35 @@ Derived expressions are recalculated when their dependencies change, but you can
 
 Unlike `$state`, which converts objects and arrays to [deeply reactive proxies]($state#Deep-state), `$derived` values are left as-is. For example, [in a case like this](/playground/untitled#H4sIAAAAAAAAE4VU22rjMBD9lUHd3aaQi9PdstS1A3t5XvpQ2Ic4D7I1iUUV2UjjNMX431eS7TRdSosxgjMzZ45mjt0yzffIYibvy0ojFJWqDKCQVBk2ZVup0LJ43TJ6rn2aBxw-FP2o67k9oCKP5dziW3hRaUJNjoYltjCyplWmM1JIIAn3FlL4ZIkTTtYez6jtj4w8WwyXv9GiIXiQxLVs9pfTMR7EuoSLIuLFbX7Z4930bZo_nBrD1bs834tlfvsBz9_SyX6PZXu9XaL4gOWn4sXjeyzftv4ZWfyxubpzxzg6LfD4MrooxELEosKCUPigQCMPKCZh0OtQE1iSxcsmdHuBvCiHZXALLXiN08EL3RRkaJ_kDVGle0HcSD5TPEeVtj67O4Nrg9aiSNtBY5oODJkrL5QsHtN2cgXp6nSJMWzpWWGasdlsGEMbzi5jPr5KFr0Ep7pdeM2-TCelCddIhDxAobi1jqF3cMaC1RKp64bAW9iFAmXGIHfd4wNXDabtOLN53w8W53VvJoZLh7xk4Rr3CoL-UNoLhWHrT1JQGcM17u96oES5K-kc2XOzkzqGCKL5De79OUTyyrg1zgwXsrEx3ESfx4Bz0M5UjVMHB24mw9SuXtXFoN13fYKOM1tyUT3FbvbWmSWCZX2Er-41u5xPoml45svRahl9Wb9aasbINJixDZwcPTbyTLZSUsAvrg_cPuCR7s782_WU8343Y72Qtlb8OYatwuOQvuN13M_hJKNfxann1v1U_B1KZ_D_mzhzhz24fw85CSz2irtN9w9HshBK7AQAAA==)...
 
-```svelte
+```ts
 let items = $state([...]);
 
 let index = $state(0);
 let selected = $derived(items[index]);
 ```
 
-...you can change (or `bind:` to) properties of `selected` and it will affect the underlying `items` array. If `items` was _not_ deeply reactive, mutating `selected` would have no effect.
+...you can change (or `bind:` to) properties of `selected` and it will affect the underlying `items` array.
+
+If `items` was _not_ deeply reactive, mutating `selected` would have no effect. In that case, you need to make the derived variable reactive on its own.
+
+```ts
+let items = [...];
+
+let index = $state(0);
+
+let selected = $derived.by(() => {
+	const proxied = $state(items[index]);
+	return proxied;
+});
+// ... or,
+function proxify<T>(init: T) {
+	const proxied = $state(init);
+	return proxied;
+}
+let selected = $derived(proxify(items[index]));
+```
+
+> [!NOTE] This workaround detaches the state from the source, so mutating the proxied object won't update the source.
 
 ## Destructuring