Vue Tip: Watch Nested Values

Michael Hoffmann

@mokkapps

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

<script setup lang="ts">
import { watch } from 'vue'
import { useRoute } from 'vue-router'

const route = useRoute()

watch(
  () => route.query.id,
  (queryId) => {
    console.log('Route Query ID', queryId)
  }
)
</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:

<script>
export default {
  watch: {
    // Note: only simple paths. Expressions are not supported.
    '$route.query.id'(queryId) {
      console.log('Route Query ID', queryId)
    },
  },
}
</script>

If you liked this Vue tip, follow me on BlueSky 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 v-bind to Pass Multiple Props to Components

Vue Tip: Use Vuex in Vue Router Navigation Guards