docs: directly watch a specific param

diff --git a/docs/guide/advanced/composition-api.md b/docs/guide/advanced/composition-api.md
index d8e344e19d6a9a143934dc59cb2d9689cc83af23..d4daf1d60da9f4231cdd5da7f63aa163c3c9307d 100644 (file)
--- a/docs/guide/advanced/composition-api.md
+++ b/docs/guide/advanced/composition-api.md
@@ -26,7 +26,7 @@ export default {
 }
 ```
 
-The `route` object is a reactive object, so any of its properties can be watched and you should **avoid watching the whole `route`** object:
+The `route` object is a reactive object, so any of its properties can be watched and you should **avoid watching the whole `route`** object. In most scenarios, you should directly watch the param you are expecting to change
 
 ```js
 import { useRoute } from 'vue-router'
@@ -38,9 +38,9 @@ export default {
 
     // fetch the user information when params change
     watch(
-      () => route.params,
-      async newParams => {
-        userData.value = await fetchUser(newParams.id)
+      () => route.params.id,
+      async newId => {
+        userData.value = await fetchUser(newId)
       }
     )
   },