I found out why it wasn’t working for me - when the Object.assign() call is made it only modifies the properties and not the entire object so the computed function is not actually triggered to rerun.

This example works for my use case (hope it helps someone else )

const routerState = Vue.observable<{route: Route}>({
  route: {
    fullPath: '',
    hash: '',
    matched: [],
    params: {},
    path: '',
    query: {},
  },
});

Router.afterEach((to) => {
  Object.assign(routerState, { route: to });
});

export const useRoute = () => computed(() => routerState.route);

I found out why it wasn’t working for me - when the Object.assign() call is made it only modifies the properties and not the entire object so the computed function is not actually triggered to rerun.

This example works for my use case (hope it helps someone else )

const routerState = Vue.observable<{route: Route}>({
  route: {
    fullPath: '',
    hash: '',
    matched: [],
    params: {},
    path: '',
    query: {},
  },
});

Router.afterEach((to) => {
  Object.assign(routerState, { route: to });
});

export const useRoute = () => computed(() => routerState.route);

This method doesn’t work if you are using typescript - you can’t pass a string as the first parameter to watch.

I also tried the method where you create a hook like this and it’s not working either:

// router.js
const route = Vue.observable<Route>({
  fullPath: '',
  hash: '',
  matched: [],
  params: {},
  path: '',
  query: {},
});

Router.afterEach((to) => {
  Object.assign(route, to);
  console.log({route}) // this console log always executes
});

export const useRoute = () => computed(() => route);

// in the component
setup() {
  const route = useRoute();
  watch(route, (newVal) => console.log(newVal)); //this console log never executes
}

It’s weird because the console.log in the afterEach hook always runs but the one in the watcher never does…

I installed quasar and it used the v2 version of vue router which doesn’t have the hooks needed for the composition api. Is quasar compatible with vue router v3?