I am trying to set up router in my Vue app. Everything seemed to work fine until i started to try implementing children routes. Now when i try to access child route i get an error message along with some warnings: What happens when i click on child router-link

My router setup:

const router = createRouter({
history: createWebHistory(),
routes: [
    { path: '/', redirect: '/welcome' },
    {
      name: 'welcome',
      path: '/welcome',
      component: WelcomePage
    },
    {
        name:'noteLists',
        path: '/noteLists',
        component: NoteListLinks,
        children: [
          {
            name:'noteListSheets',
            path: ':id',
            components: FullNoteSheet
          }
        ]
    }
],
linkActiveClass: 'active'

});

All other route links work fine.

The components template where child links are used and rendered looks like that:

<template>
<router-link 
    :to="setNoteListLink(entry.id)"
    :key=entry.id
    v-for="entry in notesListEntry"
    >
    {{entry.name}}
</router-link>
<router-view></router-view>

Function setNoteListLink just creates a links like '/noteList/1'.

The error says that it "Cannot read property 'writeDebug' of undefined" and writeDebug is a method on a component that it tries to load when i click on the route (FullNoteSheet), so i assume there is something wrong with the component and not the router. But component works just fine if i try to load it separately, by jst putting it in App component template.

If you have dealt with such issues and know the solution please let me know.