docs : props destructure extras (#2282)

* docs: Improve Japanese translation for props.md file

* chore: Update Japanese translation for props.md file

* docs: Improve Japanese translation for props.md file

* Update src/guide/components/props.md

Co-authored-by: Jun Shindo <[email protected]>

* Update src/guide/components/props.md

Co-authored-by: Jun Shindo <[email protected]>

* Update src/guide/components/props.md

Co-authored-by: Jun Shindo <[email protected]>

* Update src/guide/components/props.md

Co-authored-by: Jun Shindo <[email protected]>

* Update src/guide/components/props.md

Co-authored-by: Jun Shindo <[email protected]>

---------

Co-authored-by: Jun Shindo <[email protected]>

Author: naokihaba

src/guide/components/props.md

@@ -146,6 +146,8 @@ watchEffect(() => {
 })
 ```
 
+IDE 上で分割代入された props と通常の変数をより視覚的に区別したい場合、Vue の VSCode 拡張機能には、分割代入された props にインレイヒントを表示する設定があります。
+
 さらに、JavaScript のネイティブなデフォルト値構文を使用して、props のデフォルト値を宣言できます。これは型ベースの props 宣言を使用する場合に特に便利です:
 
 ```ts
@@ -154,6 +156,30 @@ const { foo = 'hello' } = defineProps<{ foo?: string }>()
 
 ### 関数への分割代入 props 渡し
 
+分割代入された props を関数に渡す場合、例えば：
+
+```js
+const { foo } = defineProps(['foo'])
+
+watch(foo, /* ... */)
+```
+
+これは期待通りに動作しません。なぜなら、これは `watch(props.foo, ...)` と同等であり、リアクティブなデータソースではなく値を `watch` に渡しているからです。実際、Vue のコンパイラーはこのような場合を検出し、警告を発します。
+
+通常の props を `watch(() => props.foo, ...)` と監視できるのと同様に、分割代入された props もゲッターでラップすることで監視できます：
+
+```js
+watch(() => foo, /* ... */)
+```
+
+さらに、リアクティビティを保持しながら分割代入された props を外部関数に渡す必要がある場合、これが推奨されるアプローチです：
+
+```js
+useComposable(() => foo)
+```
+
+外部関数は、提供された props の変更を追跡する必要がある場合（例えば、computed や watcher のゲッター内で）、ゲッターを呼び出す（もしくは [toValue](/api/reactivity-utilities.html#tovalue) で正規化する）ことができます。
+
 </div>
 
 ## props 渡しの詳細 {#prop-passing-details}