vue新人求助

如下代码， <template id="a"> 中的tableData值取不到， 怎么样才能让让tableData
有值？
<!DOCTYPE html>
<html style=""> <head>
<meta charset="UTF-8">
<!-- import CSS -->
<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
<style>
.font_w {
color: white;
}
</style>
</head> <body style="margin: 0 0 0 0; ">
<div id="app" style="height: 100%"> <el-container style=" border: 1px solid #eee; "> <el-header style="text-align: right; font-size: 12px; background-color: rgb(64, 158, 255);height: 80px;">
<h1 style="float: left" class="font_w"><i class="el-icon-info"></i>&nbsp;校园检查系统</h1>
<span class="font_w">欢迎您：</span><span class="font_w">王小虎</span>
<el-button type="primary" icon="el-icon-arrow-right">退出</el-button>
</el-header> <el-container>
<el-aside width="200px">
<el-menu :default-openeds="['1', '3']" router>
<el-menu-item-group>
<el-menu-item index="one">1</el-menu-item>
<el-menu-item index="two">2</el-menu-item>
<el-menu-item index="three">3</el-menu-item>
</el-menu-item-group>
</el-menu>
</el-aside>
<el-main> <router-view></router-view>
</el-main>
</el-container>
</el-container>
</div> <template id="a">
<div>
<el-table :data="tableData" style="width: 100%">
<el-table-column prop="date" label="日期" width="180">
</el-table-column>
<el-table-column prop="name" label="姓名" width="180">
</el-table-column>
<el-table-column prop="address" label="地址">
</el-table-column>
</el-table>
</div>
</template>
<template id="b">
<div>
第二个router
</div>
</template>
<template id="c">
<div>
第3个router
</div>
</template> </body>
<!-- import Vue before Element -->
<script type="text/javascript" src="js/vue.min.js"></script>
<!-- import JavaScript -->
<script type="text/javascript" src="js/index.js"></script>
<script type="text/javascript" src="js/vue-router.js"></script>
<script>
var routes = [{
path: "/one",
component: {
template: "#a"
}
},
{
path: "/two",
component: {
template: "#b"
}
},
{
path: "/three",
component: {
template: "#c"
}
},
];
// 定义路由组件
var router = new VueRouter({
routes
}); new Vue({
el: '#app',
router,
//template: "#a",
data: {
tableData: [{
date: '2016-05-02',
name: '王小虎',
address: '上海市普陀区金沙江路 1518 弄'
}, {
date: '2016-05-04',
name: '王小虎',
address: '上海市普陀区金沙江路 1517 弄'
}, {
date: '2016-05-01',
name: '王小虎',
address: '上海市普陀区金沙江路 1519 弄'
}, {
date: '2016-05-03',
name: '王小虎',
address: '上海市普陀区金沙江路 1516 弄'
}]
},
})
</script></html>