Vue $emit demo

app.js

Vue.component('counter-buttons', {
	template: `
	<div>
		<button class="btn btn-sm btn-primary" @click="$emit('increase-count')">Increase</button>
		<button class="btn btn-sm btn-secondary" @click="$emit('decrease-count')">Decrease</button>
	</div>
`
});

Vue.component('counter-view', {
	props: {
		counter: {
			type: Number,
			default: 0
		}
	},
	template: `<div><span>Counter:</span> 
	{{ counter }}</div>`
});

Vue.component('counter-input', {
	data: function() {
		return {
			countAmount: 1
		};
	},
	template: `<div class="form-group">
	<label>Amount you want to count</label>
	<input type="number" 
		v-model="countAmount" 
		class="form-control"
		@change="$emit('change-count-amount', countAmount)" 
		/></div>`
});

new Vue({
  el: "#app",
	data: function() {
		return {
			counter: 0,
			countAmount: 1
		}
	},
	methods: {
		increaseNumber: function() {
			this.counter = this.counter + this.countAmount;
		},
		decreaseNumber: function() {
			this.counter = this.counter - this.countAmount;
		},
		setCountAmount: function(amount) {
			this.countAmount = parseFloat(amount);
		}
	}
})

index.html

<style>
body {
  background: #20262E;
  padding: 20px;
  font-family: Helvetica;
}

#app {
  background: #fff;
  border-radius: 4px;
  padding: 20px;
  transition: all 0.2s;
}

li {
  margin: 8px 0;
}

h2 {
  font-weight: bold;
  margin-bottom: 15px;
}

del {
  color: rgba(0, 0, 0, 0.3);
}  
</style>

<div id="app">
	<counter-view :counter="counter"></counter-view>
	<counter-buttons 
	 	@increase-count="increaseNumber"
		 @decrease-count="decreaseNumber">
	</counter-buttons>
	<counter-input 
	      	 @change-count-amount="setCountAmount">
	</counter-input>
</div>