counter exapmle in vue js

1// child component
2Vue.component('counter', {
3  template: `<div><button @click='add'>+1</button>
4  <button @click='sub'>-1</button>
5  <div>this is inside the child component: {{ result }}</div></div>`,
6  data () {
7    return {
8      result: 0
9    }
10  },
11  props: ['value'],
12  methods: {
13    emitResult () {
14      this.$emit('input', this.result)
15    },
16    add () {
17      this.result += 1
18      this.emitResult()
19    },
20    sub () {
21      this.result -= 1
22      this.emitResult()
23    }
24  }  
25})
26