Buefy star rating

HTML

<script src="https://unpkg.com/vue/dist/vue.js"></script>
<script src="https://unpkg.com/buefy"></script>
<link rel="stylesheet" href="https://unpkg.com/buefy/lib/buefy.css">
<link rel="stylesheet" href="//cdn.materialdesignicons.com/2.0.46/css/materialdesignicons.min.css">
<div id="app">
  <star-rating :stars="5"></star-rating>
  <star-rating :stars="3"></star-rating>
  <star-rating :stars="3" show-grey></star-rating>
  <hr>
  <b-field label="Give a rating">
    <star-rating v-model="stars"/>
  </b-field>
  <b-icon icon="border-color"></b-icon>
  <b-icon icon="file-plus"></b-icon>
</div>

CSS

#app {
  margin: 2em;
}
.star-rating.clickable .icon:hover{
  cursor:pointer;
  transform:scale(1.2);
}

JavaScript

Vue.use(Buefy.default)

Vue.component('star-rating', {
	props:{
  	stars:{
    	type:Number,
      default:0
    },
    showGrey:{
    	type:Boolean,
      default:false
    }
  },
  model:{
  	prop:'stars',
    event:'click'
  },
	template:`
  <div class="control star-rating" :class="{clickable:$listeners.click}">
  	<template v-if="showGrey || $listeners.click">
    	<b-icon
        v-for="n in 5"
        icon="star"
        :type="n <= stars ? 'is-warning' : 'is-grey'"
        :key="n"
        @click.native="$emit('click', n)"
      />
    </template>
    <template v-else>
    	<b-icon
      	v-for="n in stars"
        icon="star"
        type="is-warning"
        :key="n"
      />
    </template>
  </div>`
})

var App = new Vue({
    el: '#app',
    data(){
    	return {
      	stars:0
      }
    },
    methods:{
    	log(){
      	console.log(arguments)
      }
    }
})