title: Vue-router issue with loading child component
body: <p>I have an issue.
  I have a router like this with child.</p>
  
  <pre><code>  {
      component: () =&gt; import('@/components/roles/Index'),
      path: '/roles',
      name: 'roles.index',
      meta: {
        auth: true,
        roles: ['admin']
      },
      children: [{
        component: () =&gt; import('@/components/roles/Show'),
        path: ':id',
        name: 'roles.show',
        meta: {
          auth: true,
          roles: ['admin']
      }
    }]}
  </code></pre>
  
  <p>When i click on button the url is changing but component is not loading.</p>
  
  <pre><code>&lt;v-btn icon class="mx-0" :to="{ name: 'roles.show', params: { id: props.item.id }}"&gt;
    &lt;v-icon color="blue"&gt;info&lt;/v-icon&gt;
  &lt;/v-btn&gt;
  </code></pre>
  
  <p>But when i do this like that everything work right</p>
  
  <pre><code>{
    component: () =&gt; import('@/components/roles/Index'),
    path: '/roles',
    name: 'roles.index',
    meta: {
      auth: true,
      roles: ['admin']
    }
  },
  {
    component: () =&gt; import('@/components/roles/Show'),
    path: '/roles/:id',
    name: 'roles.show',
    meta: {
      auth: true,
      roles: ['admin']
    }
  }
  </code></pre>