Vue Tip: 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>

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