Vue JS Children Nested Routes Not Showing

Question

I'm having a problem with Vue JS Nested Routes. Children component is not showing. Here's my code.

Router

{
  path: '/events',
  name: 'Events',
  components: {
    default: () => import('@/views/SideNavigation/Events/index.vue'), 
    sidebar: () => import('@/components/SideNavigation/index.vue')
  },
  children:[
    {
      path: 'list',
      component: { default: () => import('@/views/SideNavigation/Events/EventLists/index.vue'), }
    },
    {
      path: 'create',
      name: 'Create',
      component: {
        create: () => import('@/views/SideNavigation/Events/CreateEvent/index.vue'),
      }
    }
  ]
},

Event.vue (Parent)

 <template>
  <div class='events px-md-5 px-5 py-md-5 text-white'>
    <router-link to="/events">/events</router-link>
    <router-link to="/events/create">/create</router-link>
    <router-view  />
  </div>
</template>

I have router-view in my App.vue. When I click the links my children components is not showing also the script is not found

<script src="https://unpkg.com/vue/dist/vue.js"></script>
<script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>