vue 2.0 how to manage the scope of vue instance - vuejs2

Question

just a very new to Vue framework, and i have one strange thing just can not understand, as below screenshot you can see that i got two input, what i would like to accomplish is use first input to filter content in table, but when i try to move element with vue instant to cover it, i will got render error. should i use slot to pass data, seems not make sense. can anybody point out what is the issue with my code?
new Vue({
el:'#BookCard',
});
Vue.component('canvasComponent',{
template:'#canvasChart',
data:function () {
var sortOrders = {}; //定义sortOrders为空字典
//forEach为columns的每一个元素执行函数内部操作
this.columns.forEach(function (key) {
//将columns的元素设定为key值,value值都为1
sortOrders[key] = 1;
});
return {
sortKey: '',
sortOrders: sortOrders,
BookJson:{},
};
},
props:{
canvasData:Array,
columns:Array,
filterKey:String
},
methods: {
//sortBy[key]理解: 当click时执行该函数,sortBy为一个函数方法,接受key参数
sortBy: function (key) {
//并将参数赋值给内部变量
this.sortKey = key;
//更新排序序列,调用sortOrders将key代表的列反序
console.log(this.sortOrders[key]); // 1
this.sortOrders[key] = this.sortOrders[key] * -1;
console.log(this.sortOrders[key]); // -1
},
fetchBookData:function () {
var item;
var bookJson=$.getJSON('/api/book/getJson',function (data) {
format:"json",
item = data;
$.each(data,function (key,val) {
// item[key]= key;
// item[val]= val;
})
});
},
},
computed: {
filterI: function () {
return this.canvasData.filter((item) => {
return item.name.match(this.filterKey);
})
},
},
});
new Vue({
el:'#filterTest',
data:{
'keywords':[{"id":"9","name":"missy","phone":"21324234532"},
{"id":"3","name":"Mahama","phone":"345604542"},
{"id":"2","name":"Bernard","phone":"241242542"}],
canvasData:{"空间":34,"微博":30,"指导":29,"小明":28 , "图书馆": 27 , "PHP":26 , "项目" :25 ,"健康":24 , "JS" :23 ,'html' :22,'各镇': 22 ,'勋章' :21 ,'信息':20,'开发':19 , '设计':18 , '开幕式' :17 , '浏览器' :16 ,'身份':15,'图片': 14 , '中国' :13 , '伟大' :12 ,'地方':11 ,'噩梦' :10 ,'回复' :9 ,'空间' :8 , '请问' : 7 , '类库' : 6 , '激活' : 5 ,'规范' :4 ,'微软' :3 , '分割': 2 , '不错' :1 , '多个' :1, '斯蒂芬' :1, '分割' :1, '回过头' :1, '慈悲' :1, 'svg' :1, '三个' :1, '十多个' :1, '语句' :1, '写错' :1, '别冲动' :1, '请问' :1, '细长的' :1, '风光' :1, '梵蒂冈' :1, '成办' :1, '这些' :1, '是的' :1, '风格化' :1, '儿童歌' :1, '所得税' :1, '阿斯顿' :1, '斯蒂芬' :1, '电饭锅' :1, '很规范' :1, '车秩序' :1, '上网' :1, '过负荷' :1, '放到' :1, '电饭锅' :1, '东方红' :1, '风格化' :1, '请问' :1, '人头' :1, '让他' :1, '分隔' :1, '大概' :1, '福利' :1, '激活' :1, '断食' :1, '风格' :1, '瓦尔特' :1, '对方' :1, '请问' :1, '而' :1, '人头' :1, '统一' :1, '一份' :1, '放到' :1, '放到' :1, '放到' :1, '放到' :1, '上网' :1, '我是' :1, '的' :1, '耳朵' :1, '发热' :1, '乳房' :1, '跟他' :1, '通过' :1, '还好用' :1, '雅黑' :1, '聚聚' :1, '看过' :1, '似的' :1, '独' :1, '明年' :1, '手头紧' :1, '换个' :1, '数据' :1, '导入' :1, '回归' :1},
gridColumns:['id','name','phone'],
searchQuery:''
},
});
table {
border: 2px solid #42b983;
border-radius: 3px;
background-color: #fff;
}
th {
background-color: #42b983;
color: rgba(255,255,255,0.66);
cursor: pointer;
-webkit-user-select: none;
-moz-user-select: none;
-user-select: none;
}
td {
background-color: #f9f9f9;
}
th, td {
min-width: 120px;
padding: 10px 20px;
}
th.active {
color: #fff;
}
th.active .arrow {
opacity: 1;
}
.arrow {
display: inline-block;
vertical-align: middle;
width: 0;
height: 0;
margin-left: 5px;
opacity: 0.66;
}
.arrow.asc {
border-left: 4px solid transparent;
border-right: 4px solid transparent;
border-bottom: 4px solid #fff;
}
.arrow.dsc {
border-left: 4px solid transparent;
border-right: 4px solid transparent;
border-top: 4px solid #fff;
}
<link href="https://cdn.bootcss.com/bootstrap/4.0.0-alpha.6/css/bootstrap.css" rel="stylesheet"/>
<script src="https://cdn.bootcss.com/vue/2.3.4/vue.js"></script>
<script type="text/x-template" id="canvasChart">
<table>
<thead>
<tr>
<!-- 指令(Directives)是特殊的带有前缀 v- 的特性.-->
<!-- 指令的值限定为绑定表达式.因此JavaScript表达式及过滤器规则在这里也适用.-->
<!-- 指令的职责就是当其表达式的值改变时把某些特殊的行为应用到DOM上.-->
<!-- v-for用于渲染列表-->
<!-- v-on的缩写用#表示,它用于监听DOM事件-->
<!-- v-bind的缩写用:表示,v-bind指令用于响应地更新HTML特性,v-bind:class的缩写是:class,sortKey == key表达式为True时class=active-->
<!-- 用管道符 | 来表示过滤器,capitalize表示首字母大写-->
<th v-for="key in columns" :class="{active: sortKey == key}">
#{{key}}
<span class="arrow" :class="sortOrders[key] > 0 ? 'asc' : 'dsc'"></span>
<!-- 这里用到js的判断表达式操作,sortOrders[key] > 0为真,class=asc,反之class=dsc-->
<!-- v-bind:class 指令可以与普通的 class 特性共存 -->
</th>
</tr>
</thead>
<tbody>
<!-- filterBy 返回过滤后的数组,第一个参数可以是字符串或函数,filterBy filterKey 输出满足条件的结果-->
<!-- orderBy sortKey为关键字 sortOrders[sortKey]升序或者降序 -->
<tr v-for="entry in filterI">
<td v-for="key in columns">{{entry[key]}}</td><!--单元格-->
</tr>
</tbody>
</table>
</script>
<div class="container-fluid">
<div class="row">
<div class="col-md-4 col-md-offset-4">
<div class="input-group">
<input type="text" class="form-control" v-model="filter-key" placeholder="Search for...">
<span class="input-group-btn">
<button class="btn btn-default" type="button">Go!</button>
</div>
</span>
</div><!-- /input-group -->
</div>
<div class="row">
<br>
<div class="span10">
<ul class="thumbnails">
</ul>
<blockquote class="pull-right">
<p>
Select the book what you want!
</p> <small>Keyword <cite>Opensource</cite></small>
</blockquote>
</div>
</div>
<div id="filterTest">
<div class="container">
<input type="text" class="input-lg" v-model=searchQuery></input>
<div class="row">
<canvas-component :canvas-data=keywords :columns=gridColumns :filter-key=searchQuery>
</canvas-component>
</div>
</div>
</div>
</div>

Answer 1

ok, i would like answer my question, it's true,just use slot tag internal in the template and added input script front of table, so i got a result what i want, but again, another question pop out, is this the only solution?