Further small docs tweaks

Author: skirtles-code

packages/docs/guide/advanced/composition-api.md

@@ -9,7 +9,7 @@ The introduction of Vue's [Composition API](https://vuejs.org/guide/extras/compo
 
 ## Accessing the Router and current Route inside `setup`
 
-Because we don't have access to `this` inside of `setup`, we cannot directly access `this.$router` or `this.$route`. Instead, we use the `useRouter` and `useRoute` functions:
+Because we don't have access to `this` inside of `setup`, we cannot directly access `this.$router` or `this.$route`. Instead, we use the `useRouter` and `useRoute` composables:
 
 ```vue
 <script setup>

packages/docs/guide/advanced/data-fetching.md

@@ -44,13 +44,13 @@ const error = ref(null)
 // watch the params of the route to fetch the data again
 watch(() => route.params.id, fetchData, { immediate: true })
 
-async function fetchData() {
+async function fetchData(id) {
   error.value = post.value = null
   loading.value = true
   
   try {
     // replace `getPost` with your data fetching util / API wrapper
-    post.value = await getPost(route.params.id)  
+    post.value = await getPost(id)  
   } catch (err) {
     error.value = err.toString()
   } finally {
@@ -89,22 +89,20 @@ export default {
     // watch the params of the route to fetch the data again
     this.$watch(
       () => this.$route.params.id,
-      () => {
-        this.fetchData()
-      },
+      this.fetchData,
       // fetch the data when the view is created and the data is
       // already being observed
       { immediate: true }
     )
   },
   methods: {
-    async fetchData() {
+    async fetchData(id) {
       this.error = this.post = null
       this.loading = true
 
       try {
         // replace `getPost` with your data fetching util / API wrapper
-        this.post = await getPost(this.$route.params.id)
+        this.post = await getPost(id)
       } catch (err) {
         this.error = err.toString()
       } finally {

packages/docs/guide/advanced/extending-router-link.md

@@ -12,27 +12,6 @@ Let's extend RouterLink to handle external links as well and adding a custom `in
 ::: code-group
 
 ```vue [Composition API]
-<template>
-  <a v-if="isExternalLink" v-bind="$attrs" :href="to" target="_blank">
-    <slot />
-  </a>
-  <router-link
-    v-else
-    v-bind="$props"
-    custom
-    v-slot="{ isActive, href, navigate }"
-  >
-    <a
-      v-bind="$attrs"
-      :href="href"
-      @click="navigate"
-      :class="isActive ? activeClass : inactiveClass"
-    >
-      <slot />
-    </a>
-  </router-link>
-</template>
-
 <script setup>
 import { computed } from 'vue'
 import { RouterLink } from 'vue-router'
@@ -51,9 +30,7 @@ const isExternalLink = computed(() => {
   return typeof props.to === 'string' && props.to.startsWith('http')
 })
 </script>
-```
 
-```vue [Options API]
 <template>
   <a v-if="isExternalLink" v-bind="$attrs" :href="to" target="_blank">
     <slot />
@@ -74,7 +51,9 @@ const isExternalLink = computed(() => {
     </a>
   </router-link>
 </template>
+```
 
+```vue [Options API]
 <script>
 import { RouterLink } from 'vue-router'
 
@@ -95,6 +74,27 @@ export default {
   },
 }
 </script>
+
+<template>
+  <a v-if="isExternalLink" v-bind="$attrs" :href="to" target="_blank">
+    <slot />
+  </a>
+  <router-link
+    v-else
+    v-bind="$props"
+    custom
+    v-slot="{ isActive, href, navigate }"
+  >
+    <a
+      v-bind="$attrs"
+      :href="href"
+      @click="navigate"
+      :class="isActive ? activeClass : inactiveClass"
+    >
+      <slot />
+    </a>
+  </router-link>
+</template>
 ```
 
 :::

packages/docs/guide/essentials/dynamic-matching.md

@@ -69,7 +69,7 @@ import { useRoute } from 'vue-router'
 
 const route = useRoute()
 
-watch(() => route.params, (newParams, previousParams) => {
+watch(() => route.params.id, (newId, oldId) => {
   // react to route changes...
 })
 </script>
@@ -80,8 +80,8 @@ watch(() => route.params, (newParams, previousParams) => {
 export default {
   created() {
     this.$watch(
-      () => this.$route.params,
-      (toParams, previousParams) => {
+      () => this.$route.params.id,
+      (newId, oldId) => {
         // react to route changes...
       }
     )