title: How to enforce the "reset" of a component matched several times by a route definition?
body: <p>I am writing an application modelled as below:</p>
  <p><a href="https://i.stack.imgur.com/PQPNZ.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/PQPNZ.png" alt="enter image description here" /></a></p>
  <p>The intention is to have <code>/</code> redirected to <code>/&lt;uuid&gt;</code>. <code>/&lt;uuid&gt;</code> itself is managed by the component <code>User</code> and <code>User</code> passes <code>uuid</code> to <code>Case</code> as a prop.</p>
  <p>Within <code>Case</code> there is a button to reset the URI path to <code>/</code>, triggering the mechanism above again.</p>
  <hr />
  <pre><code>// content of routes.ts
  
  import { RouteRecordRaw, useRoute } from 'vue-router'
  import { uid } from 'quasar'
  
  const route = useRoute()
  
  const routes: RouteRecordRaw[] = [
    {
      path: '/',
      redirect: () =&gt; {
        return {path: `/${uid()}`}
      }
    },
    {
      path: '/:uuid',
      component: () =&gt; {console.log('matched /uuid'); return import('pages/User.vue')}
    },
  ];
  
  export default routes;
  </code></pre>
  <p>Within <code>User.vue</code> there is</p>
  <pre><code>&lt;Case :uuid=&quot;route.params.uuid&quot;&gt;&lt;/Case&gt;
  </code></pre>
  <p>where</p>
  <pre><code>const route = useRoute()
  </code></pre>
  <hr />
  <p><strong>My problem:</strong> when pressing the button that resets the path to <code>/</code>, I see the path changing, but the message <code>matched /uuid</code> is not displayed again in the console (it is displayed once, at the reload of the page).</p>
  <p>It seems that the <a href="https://router.vuejs.org/guide/advanced/lazy-loading.html" rel="nofollow noreferrer">documentation for Lazy Loading</a> 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):</p>
  <blockquote>
  <p>The component (and components) option accepts a function that returns a Promise of a component and Vue Router will only fetch it <strong>when entering the page for the first time</strong>, then use the cached version.</p>
  </blockquote>
  <p>I would like the component to &quot;know&quot; that it has been &quot;called&quot; on each reset of the path to <code>/</code> (redirected to <code>/:uuid</code>), so that it can react to the change of <code>uuid</code> and push it to the <code>Case</code> component. <strong>How to do that?</strong></p>