vue父组件，子组件使用问题

Question

在表格中使用模态框组件，也在父组件中注册了，但不知道为什么无法使用，http://jsbin.com/niverikexu/edit?html,js,output

<!-- template for the modal component -->
<script type="x/template" id="modal-template">
  <div class="modal-mask" v-show="show" transition="modal">
    <div class="modal-wrapper">
      <div class="modal-container">

        <div class="modal-header">
          <slot name="header">
            default header
          </slot>
        </div>
        
        <div class="modal-body">
          <slot name="body">
            default body
          </slot>
        </div>

        <div class="modal-footer">

             <button class="modal-default-button"
              @click="show = false">
              OK
            </button>
             <button class="modal-default-button"
              @click="show = false">
              cancel
            </button>
        </div>
      </div>
    </div>
  </div>
</script>

<!-- app -->
<div id="test">
  <table class="table table-hover">
    <span>课程表</span>
    <thead>    
      <th>课程名</th>
      <th>老师</th>
      </thead>
      <tr class="courseGrid" v-for="course in courses">
        <td>{{course.name}}</td>
        <td>{{course.teacher}}</td>
        <td>
          <div class="app">
            <button class="show-modal btn btn-primary" @click="showModal = true">修改</button>         
          </div>
        </td>
      </tr>
    </table>
</div>

// register modal component
Vue.component('modal', {
  template: '#modal-template',
  props: {
    show: {
      type: Boolean,
      required: true,
      twoWay: true    
    }
  }
});
new Vue({
   el: '.courseGrid',
    data: {
      courses: [
        { name: 'java', teacher: "haha" },
        { name: 'javascript', teacher: "hehe" },
        { name: "c", teacher: "gege" },
        { name: 'c++', teacher: "haha" },
        { name: 'c#', teacher: "hehe" },
        { name: "ruby", teacher: "gege" },
        { name: 'python', teacher: "haha" },
        { name: 'scala', teacher: "hehe" },
        { name: "haskell", teacher: "gege" },
     ]
   },
  components:{
                template:'modal-template'
            }
});
// start app
new Vue({
  el: '.app',
  data: {
    showModal: false
  }
});

Answer 1

改好了
http://jsbin.com/pocaqasavi/1/edit?html,js,console,output

Answer 2

根据你的代码修改了下：http://jsbin.com/babahoqano/1/edit?html,js,console,output