我用脚手架写的路由，想再路由组件里继续插入一个动态组件，但是没有显示，报错vue is not undefined，我猜写法是错误的，但是不知道怎么搞，用export导出，就绑定不了div和组件了，怎么办？新人刚入坑不太懂，麻烦大神们指导一下，谢谢

下面是main.js

import Vue from 'vue'
import App from './App.vue'
import VueRouter from 'vue-router'
import routerConfig from './router.config.js'

Vue.use(VueRouter);
const router = new VueRouter(routerConfig);



new Vue({
  el: '#app',
  router,
  render: h => h(App)
})

下面是App.vue

<template>
  <div id="app">
    <ul>
      <li>
        <router-link to="/home">home</router-link>
        <router-link to="/news">news</router-link>
        <router-link to="/com">com</router-link>
      </li>
    </ul>
   <div>
    <router-view></router-view>
  </div>
 
  </div>
</template>

<script>

export default {

  name: 'app',
  data(){
    return {
      msg: 'Welcome to Your Vue.js App'
    }
  }

}

</script>

下面是路由绑定router.config.js

import Home from './Home.vue'
import News from './News.vue'
import Com from './Com.vue'

export default{
    routes:[
        {path:"/home", component:Home},
        {path:"/news", component:News},
        {path:"/com", component:Com},
        {path:"*", redirect:'/news'}
    ]
}

下面是Home.vue组件，Nes.vue也差不多，所以这里不忒出来

<template>
  <div id="app">
    <h3>主页</h3>
  </div>
</template>

下面就是问题的地方
Com.vue是一个动态组件

<template>
 <div id="box2">
        <input type="button" @click="a='aaa'" value="aaa组件">
        <input type="button" @click="a='bbb'" value="bbb组件">
        <component :is="a"></component>
    </div>
</template>

<script type="text/javascript">
var vm=new Vue({
      el:'#box2', 
      data:{
        a:'aaa'
      },
      components:{
        'aaa':{
          template:'<h2>我是aaa组件</h2>'
        },
        'bbb':{
          template:'<h2>我是bbb组件</h2>'
        }
      }
    });

</script>

就是这个动态组件一直没有正常显示，并且导致页面出现空白，我把var vm=new Vue()里面的东西放到main.js也不行，怎么办？