Vue 2.0 how to extend scope of component

what confused me is when try to extend the scope of "filterTest" html element in order to accomplish that input-group to filter table instead of the one fake of testing code. is there any solution on that? the strange thing is, when move the "filterTest" element to the root or even second, it will say: "Failed to generate render function:"

Vue.component('canvasComponent',{
  template:'#canvasChart',
  data:function () {
     var sortOrders = {}; 
    
    this.columns.forEach(function (key) {
      sortOrders[key] = 1;
    });
    return {
      sortKey: '',
      sortOrders: sortOrders
    };
  },
  props:{
    canvasData:Array,
    columns:Array,
    filterKey:String
  },
  methods: {
    sortBy: function (key) {
      this.sortKey = key; 
      console.log(this.sortOrders[key]); // 1
      this.sortOrders[key] = this.sortOrders[key] * -1;
      console.log(this.sortOrders[key]); // -1
    }
  },
    computed: {
  filterI: function () {
    return this.canvasData.filter((item) => {
      return item.name.match(this.filterKey);
    })
  }
}
});

new Vue({
  el:'#filterTest',
  created(){
    this.$http.get('http://localhost:8000/api/book/getJson').then(function (data) {
      this.bookinfo=data.body.slice(0,10);
    })
  },
  data:{
    'keywords':[{"id":"9","name":"missy","phone":"21324234532"},   
              {"id":"3","name":"Mahama","phone":"345604542"},
              {"id":"2","name":"Bernard","phone":"241242542"}],
    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;
  }

<script src="http://ift.tt/2t8vUjz"></script>
@extends('layouts.app')
@section('content')
@push('scripts')

@endpush


<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}">
          @
          <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">@</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><!-- /.col-lg-6 -->
                        </div><!-- /.row -->

</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>
        
<script src=""></script>
<script src=""></script>
<script src="" ></script>
@endsection

via Chebli Mohamed