docs: Add sections of "watch() API" and "Template Refs"

README.md

@@ -71,7 +71,7 @@ const Component = {
 
 # Limitations
 
-## Unwrap
+## `Ref` Unwrap
 
 `Unwrap` is not working with Array index.
 
@@ -136,3 +136,101 @@ b.list.push(
 // unwrapped
 b.list[1].count === 1; // true
 ```
+
+---
+
+## `watch()` API
+
+`onTrack` and `onTrigger` are not available in `WatchOptions`.
+
+---
+
+## Template Refs
+
+> ✅ Support     ❌ Not Support
+
+✅ String ref && return it from `setup()`:
+
+```html
+<template>
+  <div ref="root"></div>
+</template>
+
+<script>
+  export default {
+    setup() {
+      const root = ref(null);
+
+      onMounted(() => {
+        // the DOM element will be assigned to the ref after initial render
+        console.log(root.value); // <div/>
+      });
+
+      return {
+        root,
+      };
+    },
+  };
+</script>
+```
+
+✅ String ref && return it from `setup()` && Render Function / JSX:
+
+```jsx
+export default {
+  setup() {
+    const root = ref(null);
+
+    onMounted(() => {
+      // the DOM element will be assigned to the ref after initial render
+      console.log(root.value); // <div/>
+    });
+
+    return {
+      root,
+    };
+  },
+  render() {
+    // with JSX
+    return () => <div ref="root" />;
+  },
+};
+```
+
+❌ Function ref:
+
+```html
+<template>
+  <div :ref="el => root = el"></div>
+</template>
+
+<script>
+  export default {
+    setup() {
+      const root = ref(null);
+
+      return {
+        root,
+      };
+    },
+  };
+</script>
+```
+
+❌ Render Function / JSX:
+
+```jsx
+export default {
+  setup() {
+    const root = ref(null);
+
+    return () =>
+      h('div', {
+        ref: root,
+      });
+
+    // with JSX
+    return () => <div ref={root} />;
+  },
+};
+```

README.zh-CN.md

@@ -71,7 +71,7 @@ const Component = {
 
 # 限制
 
-## Unwrap
+## `Ref` Unwrap
 
 数组索引属性无法进行自动的`Unwrap`:
 
@@ -136,3 +136,101 @@ b.list.push(
 // unwrapped
 b.list[1].count === 1; // true
 ```
+
+---
+
+## `watch()` API
+
+不支持 `onTrack` 和 `onTrigger` 选项.
+
+---
+
+## Template Refs
+
+> ✅ Support     ❌ Not Support
+
+✅ String ref && return it from `setup()`:
+
+```html
+<template>
+  <div ref="root"></div>
+</template>
+
+<script>
+  export default {
+    setup() {
+      const root = ref(null);
+
+      onMounted(() => {
+        // the DOM element will be assigned to the ref after initial render
+        console.log(root.value); // <div/>
+      });
+
+      return {
+        root,
+      };
+    },
+  };
+</script>
+```
+
+✅ String ref && return it from `setup()` && Render Function / JSX:
+
+```jsx
+export default {
+  setup() {
+    const root = ref(null);
+
+    onMounted(() => {
+      // the DOM element will be assigned to the ref after initial render
+      console.log(root.value); // <div/>
+    });
+
+    return {
+      root,
+    };
+  },
+  render() {
+    // with JSX
+    return () => <div ref="root" />;
+  },
+};
+```
+
+❌ Function ref:
+
+```html
+<template>
+  <div :ref="el => root = el"></div>
+</template>
+
+<script>
+  export default {
+    setup() {
+      const root = ref(null);
+
+      return {
+        root,
+      };
+    },
+  };
+</script>
+```
+
+❌ Render Function / JSX:
+
+```jsx
+export default {
+  setup() {
+    const root = ref(null);
+
+    return () =>
+      h('div', {
+        ref: root,
+      });
+
+    // with JSX
+    return () => <div ref={root} />;
+  },
+};
+```