I'm trying to add a new route to an existing web application:

This is the entry point:

// main.js import router from './router'; ... etc new Vue({ router, ... etc render: (h) => h(App), }).$mount('#app');

This is the router:

// router/index.js import AffiliateLinks from '../modules/affiliate_links/AffiliateLinks.vue'; Vue.use(VueRouter); const routes = [ ... etc { path: '/affiliate-links/client', component: AffiliateLinks, meta: { restricted: 'CLIENT', }, }, ]; const router = new VueRouter({ routes, }); router.beforeEach((to, from, next) => { ... etc // check routes restricted by distribution channel if (to.meta?.restricted && !to.meta.restricted.includes(store.state.user.access.distribution_channel)) { next({ path: '/' }); return; } // user is logged in, allow requested routing next(); }); export default router;

// This is the parent component:

// AffiliateLinks.vue  

// This is the subcomponent:

// AffiliateLinksModal.vue  

Everything looks simple, but when I check the Vue dev tools, I don't see the new route when I click on the component, like

 ... etc 

No response.