Vue.jsがマウントされず画面表示されない。


#1

やっていること

Webpack + Chrome-Extensionsで現在、アプリを開発しています。


うまくいかないこと

index.htmlに用意した

<body>
    <div id="app">
        <router-view></router-view>
    </div>
    <script src="./../scripts/mypage.bundle.js"></script>
</body>

上記のdiv(#app)にmain.jsでマウントをしても、マウントされず、
ブラウザ上で

<body>
    <!--function (a, b, c, d) {
    return createElement(vm, a, b, c, d, true);
  }-->
    <script src="./../scripts/mypage.bundle.js"></script>

</body>

とのみ表示されてしまいます。


ファイル

mypage.js

import Vue from 'vue';
import VueRouter from 'vue-router';
import './../../node_modules/bulma/css/bulma.css';
import Buefy from 'buefy';
import 'buefy/lib/buefy.css';
import routes from './routes.js';

Vue.use(VueRouter);
Vue.use(Buefy);

const router = new VueRouter({
    routes: routes
})

let app = new Vue({
    router
}).$mount('#app');

routes.js

import HomePage from './../components/HomePage.vue';
import AtCoderPage from './../components/AtCoderPage.vue';
import CodeforcesPage from './../components/CodeforcesPage.vue';
import CSAPage from './../components/CSAPage.vue';
import AOJPage from './../components/AOJPage.vue';

export default [
    {
        path: '/',
        component: HomePage
    },
    {
        path: '/AtCoder',
        component: AtCoderPage
    },
    {
        path: '/Codeforces',
        component: CodeforcesPage
    },
    {
        path: '/CSA',
        component: CSAPage
    },
    {
        path: '/AOJ',
        component: AOJPage
    },
];

HomePage.vue

<template>
    <div>
        <div>
            <p>
                ホームページ
            </p>
        </div>
    </div>
</template>

<script>
    export default {
        data() {
            return {}
        }
    }
</script>

<style scoped>

</style>

うまくいっていた時

Vue-Routerを取り入れる前のApp.vueのみを使用している時は以下のようにすることでマウントする事ができ、画面表示できていました。

mypage.js

import Vue from 'vue';
import Router from 'vue-router';
import './../../node_modules/bulma/css/bulma.css';
import Buefy from 'buefy';
import 'buefy/lib/buefy.css';

import App from './../components/app.vue';

Vue.use(Buefy);

let app = new Vue(App).$mount('#app');

app.vue

<template>
    <div>
        <MyHeader></MyHeader>
        <button @click="onclick" class="button is-primary">
            click
        </button>
        <Hello></Hello>
    </div>
</template>

<script>

    import Hello from './Hello.vue';
    import MyHeader from './MyHeader.vue';

    export default {
        data: function () {
            return {
                text: ""
            }
        },
        methods: {
            onclick: function () {
                console.log("おしたおl!!");
            }
        },
        components: {
            MyHeader,
            Hello
        }
    }
</script>

<style scoped>

</style>
 No newline at end of file


インターネットで調べても、マウントできていない記事を見つけることができませんでした。
どうかよろしくお願いいたします。