title: Vue router-view loading parents component instead of its own
body: <p>I have a route configuration like this:</p>
  
  <pre><code>{
      path: '/',
      component: Dashboard,
      meta: { requiresAuth: true },
      children: [
          { path: 'home', components: { container: Home } },
          {
              path: 'post',
              components: { container: Post },
              children: [
                  { path: 'add', components: { container: Add } }
              ]
          },
      ]
  },
  </code></pre>
  
  <p>I have two <code>&lt;router-view&gt;</code>s, one is named <code>container</code> and the other is not named. I am expecting the <code>Add</code> component to be loaded into the <code>container</code> router-view when I visit <code>/post/add</code> . But it's loading the <code>Post</code> component. What am I missing?</p>
  
  <p><strong>EDIT:</strong></p>
  
  <p>Post.vue:</p>
  
  <pre><code>&lt;template&gt;
      &lt;div&gt;
          &lt;p&gt;I am &lt;code&gt;./views/post/Post.vue&lt;/code&gt;&lt;/p&gt;
      &lt;/div&gt;
  &lt;/template&gt;
  </code></pre>