vue-routerでネストした際に、子コンポーネントが描画されない

Question

■状況
vue-routerを二箇所に使用し、SPAで画面を作成しようとしています。(一つが青部分、もう一つが緑部分)
しかし、子コンポーネントの方が正しく描画されない部分が解決出来ません。(NavやLoginにTopが再度描画されるバグが起こっています。)

コンポーネント設計はこの様な形にしています。

ソースコードは以下の通りです。
単一ファイルコンポーネントを使用しています。
■App.js

import Vue from 'vue'
// ルーティングの定義をインポートする
import router from './router'
// ルートコンポーネントをインポートする
import App from './App.vue'


new Vue({
    el: '#app',
    router,             // ルーティングの定義を読み込む
    components: {App},  // ルートコンポーネントの使用を宣言する
    template: '<App />' // ルートコンポーネントを描画する
});

■App.vue

<template>
    <div>
<!--ヘッダー-->
        <Header @menuOpen="menuModalOpen" />
<!--モーダル-->
        <MenuModal :menuFlg="this.menuFlg"
                   v-if="menuFlg"
                   @menuClose="MenuModalClose"
        />
<!--メイン 親vue-router-->
      <router-view></router-view>
<!--フッター-->
        <Footer />

    </div>
</template>

<script>
  import Header from './components/Header'
  import MenuModal from './components/MenuModal'
  import Footer from './components/Footer'

  export default {
    components:{
      Header,
      MenuModal,
      Footer,
    },
    data() {
      return {
        menuFlg: ''
      }
    },
    methods: {
      //メニューの開け締め
      menuModalOpen: function(){
        this.menuFlg = true;
      },
      MenuModalClose: function(){
        this.menuFlg = false;
      }


    }
  }
</script>

■router.js

import Vue from 'vue'
import VueRouter from 'vue-router'

//コンポーネントをインポート

import Top from './components/Top'
import Mypage from './components/Mypage'
import Nav from './components/Nav'
import Login from './components/Login'

// VueRouterプラグインを使用する
// これによって<RouterView />コンポーネントなどを使うことができる
Vue.use(VueRouter)

// パスとコンポーネントのマッピング
// childrenで子vue-routerを使用したい
const routes = [
  {
    path: '',
    component: Top,
    children:[
      {
        path: 'nav',
        component: Nav
      },
      {
        path: 'login',
        component: Login
      }
    ]
  },
  {
    path: '/mypage',
    component: Mypage
  },
]

// VueRouterインスタンスを作成する
const router = new VueRouter({
  mode: 'history', //#が出ないように追加
  routes
})

// VueRouterインスタンスをエクスポートする
// app.jsでインポートするため
export default router

■MenuModal.vue

<template>
    <div class="p-modal__mask">
        <div class="p-modal__container">
            <div class="p-menuNav">
              <h2 class="p-menuNav__title"><i class="fas fa-cloud-upload-alt"></i> タイトル</h2>
              <div class="p-menuNav__close" @click="menuClose"><i class="fas fa-times"></i></div>

<!--                ここに入れていく 子vue-router-->
              <router-view></router-view>

            </div>
        </div>
    </div>
</template>

<script>
  export default {
    data() {
      return {
      }
    },
    methods: {
      menuClose: function(){
        console.log('aaa');
        this.$emit('menuClose');
      }
    }
  }
</script>

■Nav.vue

<template>
  <nav class="p-menu">
    <ul class="p-menu__ul">
      <li class="p-menu__list"><a class="c-link__menu" href="#">ユーザー情報を変更</a></li>
      <li class="p-menu__list"><a class="c-link__menu" href="#">パスワードを変更</a></li>
      <li class="p-menu__list"><a class="c-link__menu" href="#">アカウントを追加</a></li>
      <li class="p-menu__list"><a class="c-link__menu" href="#">アカウントを解除</a></li>
      <li class="p-menu__list"><a class="c-link__menu" href="#">よくある質問</a></li>
      <li class="p-menu__list"><a class="c-link__menu" href="#">お知らせ</a></li>
      <li class="p-menu__list"><a class="c-link__menu" href="#">プライバシーポリシー</a></li>
      <li class="p-menu__list"><a class="c-link__menu" href="#">お問い合わせ</a></li>
      <li class="p-menu__list"><a class="c-link__menu" href="#">利用規約</a></li>
      <li class="p-menu__list"><a class="c-link__menu" href="#">ログアウト</a></li>
    </ul>
  </nav>
</template>

<script>
  export default {

  }
</script>

■環境
vue2.5.17
vue-router3.1.3
vue-template-compiler2.6.10
Laravel5.8.35

子コンポーネントが正しく描画されない件について、ご教授お願いします。

Answer 1

view-router同士が並列の関係にあり、名前付きのview-routerにしたら解決しました。