docs: shallow unwrap on setup

vuejs/docs@3e5e52e#diff-55ff289006ef954900bf36417b8e59c1586919dd6ca8d8047d053517cacb8a97

Author: naokie

src/guide/reactivity-fundamentals.md

@@ -45,13 +45,14 @@ console.log(count.value) // 1
 
 ### ref のアンラップ
 
-ref がレンダーコンテキスト(render contenxt - [setup()](composition-api-setup.html) によって返されるオブジェクト)のプロパティとして返されていてテンプレート内でアクセスされる場合、自動的に内部の値にアンラップ(ref でラップされた値を取り出す)されます。テンプレート内においては `.value` を付ける必要はありません:
+ref がレンダーコンテキスト(render contenxt - [setup()](composition-api-setup.html) によって返されるオブジェクト)のプロパティとして返されていてテンプレート内でアクセスされる場合、自動的に内部の値に浅くアンラップ(ref でラップされた値を取り出す)されます。ネストした ref だけが、テンプレート内で `.value` が必要です:
 
 ```vue-html
 <template>
   <div>
     <span>{{ count }}</span>
     <button @click="count ++">Increment count</button>
+    <button @click="nested.count.value ++">Nested Increment count</button>
   </div>
 </template>
 
@@ -61,13 +62,27 @@ ref がレンダーコンテキスト(render contenxt - [setup()](composition-ap
     setup() {
       const count = ref(0)
       return {
-        count
+        count,
+
+        nested: {
+          count
+        }
       }
     }
   }
 </script>
 ```
 
+::tip
+  If you don't need to access the actual object instance, you can wrap it in a reactive:
+
+  ```js
+  rested: reactive({
+    count
+  })
+  ```
+::
+
 ### リアクティブオブジェクト内でのアクセス
 
 `ref` がリアクティブオブジェクトのプロパティとしてアクセスまたは更新される際に、自動的に内部の値にアンラップされて通常のプロパティのように振る舞います: