docs(render-function#template-refs): Make useTemplateRef the default example (#2549)

Author: jay-es

src/guide/extras/render-function.md

@@ -706,36 +706,39 @@ const vnode = withDirectives(h('div'), [
 
 <div class="composition-api">
 
-Composition API では、`ref()` 自身を vnode の props として渡すことで、テンプレート参照が作成されます:
+Composition API を使用すると、[`useTemplateRef()`](/api/composition-api-helpers#usetemplateref) <sup class="vt-badge" data-text="3.5+" /> のテンプレート参照は、vnode に props として文字列値を渡すことによって作成されます:
 
 ```js
-import { h, ref } from 'vue'
+import { h, useTemplateRef } from 'vue'
 
 export default {
   setup() {
-    const divEl = ref()
+    const divEl = useTemplateRef('my-div')
 
-    // <div ref="divEl">
-    return () => h('div', { ref: divEl })
+    // <div ref="my-div">
+    return () => h('div', { ref: 'my-div' })
   }
 }
 ```
 
-もしくは（バージョン 3.5 以上）
+<details>
+<summary>3.5 以前を使用している場合</summary>
+
+useTemplateRef() が導入されていない 3.5 より前のバージョンでは、ref() 自体を vnode の props としてとして渡すことにより、テンプレート参照が作成されます:
 
 ```js
-import { h, useTemplateRef } from 'vue'
+import { h, ref } from 'vue'
 
 export default {
   setup() {
-    const divEl = useTemplateRef('my-div')
+    const divEl = ref()
 
     // <div ref="divEl">
-    return () => h('div', { ref: 'my-div' })
+    return () => h('div', { ref: divEl })
   }
 }
 ```
-
+</details>
 </div>
 <div class="options-api">