Javascript is required
Mokkapps LogoMichael Hoffmann

Vue Tip: Watch Nested Values

Michael Hoffmann (Mokkapps) - Senior Frontend Developer (Freelancer)
Michael Hoffmann
Mar 11, 2022
1 min read
|
117 views
Script
Vue Tip: Watch Nested Values Image

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 Twitter to get notified about new tips, blog posts, and more. Alternatively (or additionally), you can subscribe to my weekly Vue newsletter.