動態(tài)組件components不能在腳手架哪里正常顯示

我用腳手架寫的路由，想再路由組件里繼續(xù)插入一個動態(tài)組件，但是沒有顯示，報錯vue is not undefined，我猜寫法是錯誤的，但是不知道怎么搞，用export導(dǎo)出，就綁定不了div和組件了，怎么辦？新人剛?cè)肟硬惶?，麻煩大神們指?dǎo)一下，謝謝

下面是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是一個動態(tài)組件

<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>

就是這個動態(tài)組件一直沒有正常顯示，并且導(dǎo)致頁面出現(xiàn)空白，我把var vm=new Vue()里面的東西放到main.js也不行，怎么辦？