add a warning against nesting shallow proxies inside deep ones

src/api/reactivity-advanced.md

@@ -143,6 +143,10 @@ Shallow version of [`reactive()`](./reactivity-core.html#reactive).
 
   Unlike `reactive()`, there is no deep conversion: only root-level properties are reactive for a shallow reactive object. Property values are stored and exposed as-is - this also means properties with ref values will **not** be automatically unwrapped.
 
+  :::warning Use with Caution
+  Shallow data structures should only be used for root level state in a component. Avoid nesting it inside a deep reactive object as it creates a tree with inconsistent reactivity behavior which can be difficult to understand and debug.
+  :::
+
 - **Example**
 
   ```js
@@ -177,6 +181,10 @@ Shallow version of [`readonly()`](./reactivity-core.html#readonly).
 
   Unlike `readonly()`, there is no deep conversion: only root-level properties are made readonly. Property values are stored and exposed as-is - this also means properties with ref values will **not** be automatically unwrapped.
 
+  :::warning Use with Caution
+  Shallow data structures should only be used for root level state in a component. Avoid nesting it inside a deep reactive object as it creates a tree with inconsistent reactivity behavior which can be difficult to understand and debug.
+  :::
+
 - **Example**
 
   ```js