Vue component for Custom Button

CustomButton.vue

<template>
  <button 
    :type="btnType" 
    class="primary-btn"> 
    <slot> </slot> 
  </button>
</template>

<script>
  export default {
    name: 'ButtonCustom',
    props: {
      btnType: {
        Type: String,
        default: 'button'
      },
    },
  }
</script>

<style scoped>
.primary-btn{
  border: none;
  background-color:#F58F7C;
  padding: 0.5rem 1rem;
  color: #2C2B30;
  font-weight: bold;
  cursor: pointer;
}
.primary-btn:hover{
  color: #2C2B30;
  text-decoration: none;
  box-shadow: 0 2px 2px rgba(0,0,0,.2);
  background-color: #fff;
}
.primary-btn:focus{
  color: #2C2B30;
  text-decoration: none;
  outline: none;
}
.primary-btn.white{
  box-shadow: 0 2px 2px rgba(0,0,0,.2);
  background-color: #fff;
}
.arrow-right-btn:after {
  content: "\00bb";
  opacity: 1;
  width: 12px;
  margin-left: 8px;
}
@media (min-width: 768px){
  .arrow-right-btn:after {
    content: "\00bb";
    opacity: 0;
    overflow: hidden;
    width: 0;
    -webkit-transition: all .3s ease-in-out;
    transition: all .3s ease-in-out;
    color: #F58F7C;
    margin-left: 0px;
  }
  .arrow-right-btn:hover:after {
    opacity: 1;
    width: 12px;
    margin-left: 8px;
  }
}
</style>

UsingCustomButton.vue

<template>
  <ButtonCustom
    @click.native="showMore"
    class="white font-bad arrow-right-btn">
    <template>
      More..
    </template>
  </ButtonCustom>
</template>

<script>
methods:{
    showMore(){
      console.log('Show More clicked');
    }
}
</script>

Click won't work in vue version 2, a possible solution is to use $emit, but what to do with event modifiers? <template> <button :type="btnType" @click="$emit('click')" class="primary-btn"> <slot> </slot> </button> </template>

Smart people came up with everything before us, albeit in Russian https://ru.stackoverflow.com/questions/891823/%D0%9F%D0%B5%D1%80%D0%B5%D0%B4%D0%B0%D1%87%D0%B0-%D0%B2-%D0%BA%D0%BE%D0%BC%D0%BF%D0%BE%D0%BD%D0%B5%D0%BD%D1%82-%D0%B2-%D0%BA%D0%B0%D1%87%D0%B5%D1%81%D1%82%D0%B2%D0%B5-%D0%BF%D0%B0%D1%80%D0%B0%D0%BC%D0%B5%D1%82%D1%80%D0%B0-%D1%84%D1%83%D0%BD%D0%BA%D1%86%D0%B8%D0%B8-vue-js