[Vuejs]-Parent Content appear in child sub_routes

const Index = {
  template: `<div>Index</div>`
}
const About = {
  template: `
    <div>
      About
      <router-view></router-view>
    </div>
  `
}
const Test = {
  template: `<div>Test</div>`
}
const Blog = {
  template: `<div>Blog</div>`
}
const Me = {
  template: `<div>Me</div>`
}

const router = new VueRouter({
  routes: [
    {
      path: '/',
      name: 'index',
      component: Index
    },
    {
      path: '/test',
      name: 'test',
      component: Test,
    },
    {
      path: '/blog',
      name: 'blog',
      component: Blog,
    },
    {
      path: '/about',
      name: 'about',
      component: About,
      children: [
        {
          path: 'me',
          name: 'aboutMe',
          component: Me,
        }
      ]
    }
  ]
});

new Vue({
  el: '#app',
  router
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.6.11/vue.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue-router/3.1.3/vue-router.min.js"></script>

<div id="app">
  <div id="nav">
    <ul>
      <router-link to="/about" tag="li" replace>About</router-link>
      <router-link to="/Test" tag="li">Test</router-link>
      <router-link to="/Blog" tag="li">Blog</router-link>
    </ul>
  </div>
  <div>
    <ul>
      <router-link to="/about/me" tag="li">Me</router-link>
    </ul>
  </div>
  <router-view></router-view>
</div>