Vue Tip: Watch Nested Values

The watch option support a dot-delimited path as key to watch nested values:

1<script setup lang="ts">
2import { watch } from 'vue'
3import { useRoute } from 'vue-router'
4
5const route = useRoute()
6
7watch(
8  () => route.query.id,
9  (queryId) => {
10    console.log('Route Query ID', queryId)
11  }
12)
13</script>

The above example assumes that you are using the Composition API with TypeScript.

If you are using Options API the code looks like this:

1<script>
2export default {
3  watch: {
4    // Note: only simple paths. Expressions are not supported.
5    '$route.query.id'(queryId) {
6      console.log('Route Query ID', queryId)
7    },
8  },
9}
10</script>

If you liked this Vue tip, follow me on X to get notified about new tips, blog posts, and more. Alternatively (or additionally), you can subscribe to my weekly Vue & Nuxt newsletter:

Vue Tip: Use Vuex in Vue Router Navigation Guards

It's possible to use Vuex state to determine if a user is allowed to visit certain Vue Router routes.

Vue Tip: Use v-bind to Pass Multiple Props to Components

Instead of passing each property individually to a component, you can bind an object to it.