为什么直接绑定在 Vue 自定义组件标签上的事件无法触发

如题，我在自定义组件标签上绑定了事件，点击时却无法触发，代码如下：

<template id="test">
  <p>Hi</p>
</template>

<div id="app">
  <test @click="hello"></test>
</div>

Vue.component('test', {
  template: "#test"
})

new Vue({
  el: '#app',
  data: {},
  methods: {
    hello: function() {
      alert();
    }
  }
})

然鹅，我把 @click 放到父级标签上却又可以触发了，这是为啥？

<div id="app" @click="hello">
  <test></test>
</div>