From 31c3a14775909c45fc1d33893db92539305b262f Mon Sep 17 00:00:00 2001
From: Naoki Endoh <naoki.endoh@gmail.com>
Date: Tue, 27 Apr 2021 19:46:21 +0900
Subject: [PATCH 1/6] fix: reduce heading levels for Template Refs to match
 other pages

https://github.com/vuejs/docs-next/commit/238422bded68f1d0260b89c3f9c3833831cd8cdc#diff-0d7cf8a91f2b75133d55bf4cdc5d6d0ff19310e1c836adf7fabd0ac4cf5e87d0
---
 src/guide/composition-api-template-refs.md | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/src/guide/composition-api-template-refs.md b/src/guide/composition-api-template-refs.md
index 30c7180a..334350a7 100644
--- a/src/guide/composition-api-template-refs.md
+++ b/src/guide/composition-api-template-refs.md
@@ -1,4 +1,4 @@
-## テンプレート参照
+# テンプレート参照
 
 > この節ではコード例で [単一ファイルコンポーネント](single-file-component.html)の文法を使用しています。
 
@@ -36,7 +36,7 @@
 
 テンプレート参照は他の参照と似た挙動をします。つまり、リアクティブかつコンポジション関数に渡す(または返す)ことができます。
 
-### JSX での使用例
+## JSX での使用例
 
 ```js
 export default {
@@ -54,7 +54,7 @@ export default {
 }
 ```
 
-### Usage inside `v-for`
+## Usage inside `v-for`
 
 コンポジション API のテンプレート参照を `v-for` 内部で使う場合、特別な処理はされません。代わりに、関数を使って ref に独自処理を行うようにします。
 

From 502cfde0ca2cf3e22f1b61533a080d18af5c06da Mon Sep 17 00:00:00 2001
From: Naoki Endoh <naoki.endoh@gmail.com>
Date: Tue, 27 Apr 2021 19:50:21 +0900
Subject: [PATCH 2/6] fix: remove a line break that is different from the
 original

---
 src/guide/composition-api-template-refs.md | 3 +--
 1 file changed, 1 insertion(+), 2 deletions(-)

diff --git a/src/guide/composition-api-template-refs.md b/src/guide/composition-api-template-refs.md
index 334350a7..01a94198 100644
--- a/src/guide/composition-api-template-refs.md
+++ b/src/guide/composition-api-template-refs.md
@@ -4,8 +4,7 @@
 
 > このガイドはすでに [コンポジション API 導入](composition-api-introduction.html) を読んでいることを前提に書かれています。もしまだ読んでいないのなら、先に読みましょう。
 
-コンポジション API を使うとき、 [リアクティブ参照](reactivity-fundamentals.html#creating-standalone-reactive-values-as-refs) と [テンプレート参照](component-template-refs.html) のコンセプトは同じになります。
-テンプレート内の要素やコンポーネントインスタンスの参照を取得するために、 ref 宣言して [setup()](composition-api-setup.html) で返します。
+コンポジション API を使うとき、 [リアクティブ参照](reactivity-fundamentals.html#creating-standalone-reactive-values-as-refs) と [テンプレート参照](component-template-refs.html) のコンセプトは同じになります。テンプレート内の要素やコンポーネントインスタンスの参照を取得するために、 ref 宣言して [setup()](composition-api-setup.html) で返します。
 
 ```html
 <template>

From cdb70543de7e4a9e56e5e46899658bda8b1ec12a Mon Sep 17 00:00:00 2001
From: Naoki Endoh <naoki.endoh@gmail.com>
Date: Tue, 27 Apr 2021 20:04:15 +0900
Subject: [PATCH 3/6] =?UTF-8?q?Document=20why=20watched=20template=20refs?=
 =?UTF-8?q?=20require=20the`flush:=20'post'`=20option=20=E2=80=A6?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

https://github.com/vuejs/docs-next/commit/efbbe5916b9a11bfe174f950096ac36e2f7241f3#diff-0d7cf8a91f2b75133d55bf4cdc5d6d0ff19310e1c836adf7fabd0ac4cf5e87d0
---
 src/guide/composition-api-template-refs.md | 63 ++++++++++++++++++++++
 1 file changed, 63 insertions(+)

diff --git a/src/guide/composition-api-template-refs.md b/src/guide/composition-api-template-refs.md
index 01a94198..db78afb7 100644
--- a/src/guide/composition-api-template-refs.md
+++ b/src/guide/composition-api-template-refs.md
@@ -85,3 +85,66 @@ export default {
   }
 </script>
 ```
+
+## Watching Template Refs
+
+Watching a template ref for changes can be an alternative to the use of lifecycle hooks that was demonstrated in the previous examples.
+
+But a key difference to lifecycle hooks is that `watch()` and `watchEffect()` effects are run *before* the DOM is mounted or updated so the template ref hasn't been updated when the watcher runs the effect:
+
+```vue
+<template>
+  <div ref="root">This is a root element</div>
+</template>
+
+<script>
+  import { ref, watchEffect } from 'vue'
+
+  export default {
+    setup() {
+      const root = ref(null)
+
+      watchEffect(() => {
+        // This effect runs before the DOM is updated, and consequently, 
+        // the template ref does not hold a reference to the element yet.
+        console.log(root.value) // => null
+      })
+
+      return {
+        root
+      }
+    }
+  }
+</script>
+```
+
+Therefore, watchers that use template refs should be defined with the `flush: 'post'` option. This will run the effect *after* the DOM has been updated and ensure that the template ref stays in sync with the DOM and references the correct element.
+
+```vue
+<template>
+  <div ref="root">This is a root element</div>
+</template>
+
+<script>
+  import { ref, watchEffect } from 'vue'
+
+  export default {
+    setup() {
+      const root = ref(null)
+
+      watchEffect(() => {
+        console.log(root.value) // => <div></div>
+      }, 
+      {
+        flush: 'post'
+      })
+
+      return {
+        root
+      }
+    }
+  }
+</script>
+```
+
+* See also: [Computed and Watchers](./reactivity-computed-watchers.html#effect-flush-timing)

From 7410b0a57241589d42b65c1a28089ee0bb2472fe Mon Sep 17 00:00:00 2001
From: Naoki Endoh <naoki.endoh@gmail.com>
Date: Tue, 27 Apr 2021 20:40:24 +0900
Subject: [PATCH 4/6] docs: translate 'Watching Template Refs' section

---
 src/guide/composition-api-template-refs.md | 16 ++++++++--------
 1 file changed, 8 insertions(+), 8 deletions(-)

diff --git a/src/guide/composition-api-template-refs.md b/src/guide/composition-api-template-refs.md
index db78afb7..cc5dabfd 100644
--- a/src/guide/composition-api-template-refs.md
+++ b/src/guide/composition-api-template-refs.md
@@ -53,7 +53,7 @@ export default {
 }
 ```
 
-## Usage inside `v-for`
+## `v-for` 内部での使用
 
 コンポジション API のテンプレート参照を `v-for` 内部で使う場合、特別な処理はされません。代わりに、関数を使って ref に独自処理を行うようにします。
 
@@ -86,11 +86,11 @@ export default {
 </script>
 ```
 
-## Watching Template Refs
+## テンプレート参照の監視
 
-Watching a template ref for changes can be an alternative to the use of lifecycle hooks that was demonstrated in the previous examples.
+変更のためテンプレート参照の監視をすることは、前の例で説明したライフサイクルフックの使い方に代わる方法です。
 
-But a key difference to lifecycle hooks is that `watch()` and `watchEffect()` effects are run *before* the DOM is mounted or updated so the template ref hasn't been updated when the watcher runs the effect:
+しかしライフサイクルフックとの重要な違いは、`watch()` や `watchEffect()` の作用は、DOM がマウントされたり更新されたりする *前に* 実行されるので、ウォッチャが作用を実行したときには、テンプレート参照は更新されていないということです:
 
 ```vue
 <template>
@@ -105,8 +105,8 @@ But a key difference to lifecycle hooks is that `watch()` and `watchEffect()` ef
       const root = ref(null)
 
       watchEffect(() => {
-        // This effect runs before the DOM is updated, and consequently, 
-        // the template ref does not hold a reference to the element yet.
+        // この作用は DOM が更新される前に実行され、
+        // 結果的にテンプレート参照は、まだ要素への参照を保持していません。
         console.log(root.value) // => null
       })
 
@@ -118,7 +118,7 @@ But a key difference to lifecycle hooks is that `watch()` and `watchEffect()` ef
 </script>
 ```
 
-Therefore, watchers that use template refs should be defined with the `flush: 'post'` option. This will run the effect *after* the DOM has been updated and ensure that the template ref stays in sync with the DOM and references the correct element.
+そのため、テンプレート参照を使うウォッチャは、 `flush: 'post'` オプションをつけて定義する必要があります。これにより、DOM が更新された *あとに*　作用が実行され、テンプレート参照が DOM と同期して、正しい要素を参照するようになります。
 
 ```vue
 <template>
@@ -147,4 +147,4 @@ Therefore, watchers that use template refs should be defined with the `flush: 'p
 </script>
 ```
 
-* See also: [Computed and Watchers](./reactivity-computed-watchers.html#effect-flush-timing)
+* 参照: [算出プロパティとウォッチ](./reactivity-computed-watchers.html#作用フラッシュのタイミング)

From 45299fafc7c9cdcf0d7efbedc300b69c96608639 Mon Sep 17 00:00:00 2001
From: Naoki Endoh <naoki.endoh@gmail.com>
Date: Tue, 27 Apr 2021 20:42:50 +0900
Subject: [PATCH 5/6] fix: untranslate 'compostion api'

---
 src/guide/composition-api-template-refs.md | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/src/guide/composition-api-template-refs.md b/src/guide/composition-api-template-refs.md
index cc5dabfd..2c119614 100644
--- a/src/guide/composition-api-template-refs.md
+++ b/src/guide/composition-api-template-refs.md
@@ -2,9 +2,9 @@
 
 > この節ではコード例で [単一ファイルコンポーネント](single-file-component.html)の文法を使用しています。
 
-> このガイドはすでに [コンポジション API 導入](composition-api-introduction.html) を読んでいることを前提に書かれています。もしまだ読んでいないのなら、先に読みましょう。
+> このガイドはすでに [Composition API 導入](composition-api-introduction.html) を読んでいることを前提に書かれています。もしまだ読んでいないのなら、先に読みましょう。
 
-コンポジション API を使うとき、 [リアクティブ参照](reactivity-fundamentals.html#creating-standalone-reactive-values-as-refs) と [テンプレート参照](component-template-refs.html) のコンセプトは同じになります。テンプレート内の要素やコンポーネントインスタンスの参照を取得するために、 ref 宣言して [setup()](composition-api-setup.html) で返します。
+Composition API を使うとき、 [リアクティブ参照](reactivity-fundamentals.html#creating-standalone-reactive-values-as-refs) と [テンプレート参照](component-template-refs.html) のコンセプトは同じになります。テンプレート内の要素やコンポーネントインスタンスの参照を取得するために、 ref 宣言して [setup()](composition-api-setup.html) で返します。
 
 ```html
 <template>
@@ -33,7 +33,7 @@
 
 ここでは、レンダーコンテキスト上に `root` 変数を公開し、`ref="root"` を経由し ref で宣言された変数 と div 要素と束縛します。 仮想 DOM のパッチアルゴリズムの中で、 VNode の `ref` キーがレンダーコンテキストの ref に対応する場合、VNode の対応する要素またはコンポーネントインスタンスに ref の値が代入されます。これは仮想 DOM のマウント/パッチ処理中に実行されるので、テンプレート参照に値が代入されるのは初回レンダリング後になります。
 
-テンプレート参照は他の参照と似た挙動をします。つまり、リアクティブかつコンポジション関数に渡す(または返す)ことができます。
+テンプレート参照は他の参照と似た挙動をします。つまり、リアクティブかつ Composition 関数に渡す(または返す)ことができます。
 
 ## JSX での使用例
 
@@ -55,7 +55,7 @@ export default {
 
 ## `v-for` 内部での使用
 
-コンポジション API のテンプレート参照を `v-for` 内部で使う場合、特別な処理はされません。代わりに、関数を使って ref に独自処理を行うようにします。
+Composition API のテンプレート参照を `v-for` 内部で使う場合、特別な処理はされません。代わりに、関数を使って ref に独自処理を行うようにします。
 
 ```html
 <template>

From 4442d0b872e738c81224994bf4946a27195d29a0 Mon Sep 17 00:00:00 2001
From: Naoki Endoh <naoki.endoh@gmail.com>
Date: Tue, 27 Apr 2021 20:45:31 +0900
Subject: [PATCH 6/6] fix: broken link

---
 src/guide/composition-api-template-refs.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/guide/composition-api-template-refs.md b/src/guide/composition-api-template-refs.md
index 2c119614..1637924f 100644
--- a/src/guide/composition-api-template-refs.md
+++ b/src/guide/composition-api-template-refs.md
@@ -4,7 +4,7 @@
 
 > このガイドはすでに [Composition API 導入](composition-api-introduction.html) を読んでいることを前提に書かれています。もしまだ読んでいないのなら、先に読みましょう。
 
-Composition API を使うとき、 [リアクティブ参照](reactivity-fundamentals.html#creating-standalone-reactive-values-as-refs) と [テンプレート参照](component-template-refs.html) のコンセプトは同じになります。テンプレート内の要素やコンポーネントインスタンスの参照を取得するために、 ref 宣言して [setup()](composition-api-setup.html) で返します。
+Composition API を使うとき、 [リアクティブ参照](reactivity-fundamentals.html#独立したリアクティブな値を-参照-として作成する) と [テンプレート参照](component-template-refs.html) のコンセプトは同じになります。テンプレート内の要素やコンポーネントインスタンスの参照を取得するために、 ref 宣言して [setup()](composition-api-setup.html) で返します。
 
 ```html
 <template>