Vue.js组件未注册事件

Question

我正在使用Vue.js处理一个小型进度条组件。在vm-progress组件上，计算的属性按预期工作。但是，在三个按钮上，不调用increase_progress方法。安装vue.js浏览器扩展后，没有注册任何事件。我试过添加调试和打印语句没有任何运气。

<template>
  <div class="progbar">
    <a class="app-task-title"  style="text-align:center;">Text</a>
    <div class="app-bar">
      <vm-progress :percentage="calc_percentage" :text-inside="true" :stroke-width="18" ></vm-progress>
    </div>

      <button v-on:click="increase_progress(5)"  class="prog-bar-button" id="five_button"  >+5m</button>
      <button @click="increase_progress(10)" class="prog-bar-button" id="ten_button" >+10m</button>
      <button v-on:click="increase_progress(30)" class="prog-bar-button" id="thirty_button" >+30m</button>
  </div>

</template>

<script type="text/javascript">
import Progress from 'vue-multiple-progress'

  export default {
    data (){
      return {
        completed_minutes:0,
        total_minutes:60,
        percent_complete:0
      };
    },
    components :{
      'vm-progress': Progress
    },
    methods:{
      increase_progress: function(minutes){
        this.completed_minutes += minutes
        this.completed_minutes%=(this.total_minutes + 1);
        if((this.completed_minutes >= this.total_minutes) || (this.completed_minutes < 0)){
          return
        }

      }
    },
    computed:{
      calc_percentage: function(){
        return Math.round((100.0*this.completed_minutes)/this.total_minutes);
      }
    }
  }


</script>

<style >
.progbar{
  border: 2px solid #000000;
  height: auto;
  width: 90%;
  margin-right: 5%;
  margin-left: 5%;
  display: grid;
  grid-template-columns: 10% 81% 3% 3% 3%;
  grid-template-rows: 25px;
  align-items: center;
  justify-content: center;


}

.prog-bar-button{
  font-family:Verdana;
  font-size: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.app-task-title{
  grid-column-start: 1;
  grid-column-end: 2;
  font-size: 20px;
  text-align:center;
  vertical-align: middle;

  display:inline;

}

.app-bar{
  grid-column-start: 2;
  grid-column-end: 3;
  align-self: center;
}

.progbar #five_button{
  grid-column-start: 3;
  grid-column-end: 4;


}
.progbar #ten_button{
  grid-column-start: 4;
  grid-column-end: 5;


}

.progbar #thirty_button{
  grid-column-start: 5;
  grid-column-end: end;


}

</style>