Javascript is required
ยท
0 min read

Vue Tip: Watch Nested Values

Vue Tip: Watch Nested Values Image

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:

I will never share any of your personal data. You can unsubscribe at any time.