<script type="text/x-template" id="handle-click">
  <button @click="handleClick('Hello, W3cplus.com', $event)" @mouseenter="handleMouseEnter">Click Me(^_^)</button>
</script>

<div id="app">
  <my-button />
</div>

// Variables
$color: #c0392b;
$color-dark: #a53125;
$speed: "0.25s";
$transition: all #{$speed} cubic-bezier(0.310, -0.105, 0.430, 1.400);

body {
  width: 100vw;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
}
/* Main Styles */
button {
  border: none 0;
	display: inline-block;
	background-color: $color;
	color: #fff;
	cursor: pointer;
	border-radius: 5px;
  padding: 2vw 4vw;
  font-size: 4vw;
	box-shadow: 0 0 20px 0 rgba(0,0,0,.3);
	transition: $transition;
  
  &:hover {
    background-color: darken($color, 5%);
  }
  
  &:active,
  &:focus {
    outline: none;
  }
}
	

Vue.component('my-button', {
  template: '#handle-click',
  name: 'SingleComponent',
  methods: {
    handleClick (value, event) {
      alert(`${value}!`)
      console.log('Click', event)
    },
    handleMouseEnter (event) {
      console.log('Mouse Enter', event)
    }
  }
})

let app = new Vue({
  el: '#app'
})