Edit in JSFiddle

Vue.component('button-add', {
  template: '<button v-on:click="incrementAdd">{{ counter }}</button>',
  data: function () {
    return {
      counter: 0
    }
  },
  methods: {
    incrementAdd: function () {
      this.counter += 1
      this.$emit('increment')
    }
  },
});
Vue.component('button-reduce', {
  template: '<button v-on:click="incrementReduce">{{ counter }}</button>',
  data: function () {
    return {
      counter: 0
    }
  },
  methods: {
    incrementReduce: function () {
      this.counter -= 1;
      this.$emit('increment')
    }
  },
});
new Vue({
  el: '#counter-event-example',
  data: {
    total: 0
  },
  methods: {
    incrementTotal: function () {
      this.total += 1
    },
    incrementJian: function () {
      this.total -= 1
    }
  }
})

<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<div id="counter-event-example">
  <p>{{ total }}</p>
  <button-add v-on:increment="incrementTotal"></button-add>
  <button-reduce v-on:increment="incrementJian"></button-reduce>
</div>