title: Vue Router : Cant define children for default OR main components
body: <p>First of all I'm learning Vue JS 2 since about a week and I'm stuck on a problem with Vue Router.  I'm pretty sure the solution is right in front of my eyes but I wasn't able to find it yet.</p>
  <p>So : On my root route I have 2 views in components Home and NotAuth.<br />
  My aim is to display the Login component and others routes related to it when the user isn't logged.<br />
  And when the user logs in the Home component is displayed on '/' and all login related routes are not accessible by him.</p>
  <p>It works when I'm logged if I try to access '/register' Im instantly redirected to 'Home'.<br />
  But when I'm not logged if I try to access say '/add_device' a blank page is displayed.</p>
  <p>What I'd like to do is define other routes as Home's children but I cant find anything in the doc explaining how to do so.<br />
  I've tried several things and none worked and I'm kind of lost on how to proceed.</p>
  <p>If anyone has a clue on how to proceed that would be awesome.<br />
  Thanks !!</p>
  <p>index.js</p>
  <pre><code>const routes = [
    {
      path: '/',
      name: '',
      components: {
        login: NotAuth,
        default: Home
      },
      children: [
        {
          path: '/',
          name: 'Login',
          component: Login
        },
        {
          path: '/register',
          name: 'Register',
          component: Register
        },
        {
          path: '/reset',
          name: 'ResetPassword',
          component: ResetPassword
        },
        {
          path: '/reset-sent',
          name: 'ResetSent',
          component: ResetSent
        },
        {
          path: '/change-password/:token/:mail',
          name: 'ChangePassword',
          component: ChangePassword
        },
        {
          path: '/confirmation',
          name: 'Confirmation',
          component: Confirmation
        }
      ]
    },
    {
      path: '/add_device',
      name: 'device',
      component: Device
    },
    {
      path: '/add_scene',
      name: 'scene',
      component: Scene
    },
    {
      path: '/add_room',
      name: 'room',
      component: Room
    },
  ]
  </code></pre>
  <p>App.vue</p>
  <pre><code>&lt;div id=&quot;app&quot;&gt;
    &lt;router-view v-if='userAuthenticated' :username='this.user.first_name' :user='this.user'&gt;&lt;/router-view&gt;
    &lt;router-view name=&quot;login&quot; v-else @isAuth='handle'&gt;&lt;/router-view&gt;
  &lt;/div&gt;
  </code></pre>