'How to enforce the "reset" of a component matched several times by a route definition?

I am writing an application modelled as below:

enter image description here

The intention is to have / redirected to /<uuid>. /<uuid> itself is managed by the component User and User passes uuid to Case as a prop.

Within Case there is a button to reset the URI path to /, triggering the mechanism above again.


// content of routes.ts

import { RouteRecordRaw, useRoute } from 'vue-router'
import { uid } from 'quasar'

const route = useRoute()

const routes: RouteRecordRaw[] = [
  {
    path: '/',
    redirect: () => {
      return {path: `/${uid()}`}
    }
  },
  {
    path: '/:uuid',
    component: () => {console.log('matched /uuid'); return import('pages/User.vue')}
  },
];

export default routes;

Within User.vue there is

<Case :uuid="route.params.uuid"></Case>

where

const route = useRoute()

My problem: when pressing the button that resets the path to /, I see the path changing, but the message matched /uuid is not displayed again in the console (it is displayed once, at the reload of the page).

It seems that the documentation for Lazy Loading suggests that the component is initialized only once (and I am not sure what it means in terms of routing a new path to it):

The component (and components) option accepts a function that returns a Promise of a component and Vue Router will only fetch it when entering the page for the first time, then use the cached version.

I would like the component to "know" that it has been "called" on each reset of the path to / (redirected to /:uuid), so that it can react to the change of uuid and push it to the Case component. How to do that?



Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source