Vue2.0的子元素自定义组件不能调用父元素的methods

Question

代码如下：

<div id="counter-event-example">

  <p>{{ total }}</p>

     <button-counter v-on:click="incrementTotal"></button-counter>

     <button-counter v-on:click="incrementTotal"></button-counter>

</div>

<script>

Vue.component('button-counter', {

    template: '<button >{{ counter }}</button>',

        data: function () {

           return {

              counter: 0

           };

        }

});

        

new Vue({

el: '#counter-event-example',

    data: {

         total: 0

    },

    methods: {

         incrementTotal: function () {

            this.total += 1;

        }

    }

});

</script>

为什么button-counter添加的click事件不能调用父元素的methods里面的方法呢？