Vue events on components

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.16/vue.min.js"></script>
<div id="app">
  <multi-choice :items="myItems" @selected="alert($event)"></multi-choice>
  <multi-choice :items="myItems" @selected="sayIsCool"></multi-choice>
</div>

CSS

.multi-choice {
  display: inline-block;
  background-color: #333;
  color: white;
  border-radius: 5px;
}

.multi-choice span {
  display: inline-block;
  padding: 5px 10px;
  border-right: 1px solid #999;
  cursor: pointer;
}

.multi-choice span:last-child {
  border-right: none;
}

JavaScript

const multiChoice = {
	template: '<div class="multi-choice"><span v-for="item in items" @click="select(item)">{{ item }}</span></div>',
  props: ['items'],
  methods: {
  	select(item) {
    	this.$emit('selected', item);
    }
  }
};

new Vue({
  el: "#app",
  data() {
  	return {
    	myItems: [
      	'Homer',
        'Marge',
        'Bart'
      ],
    }
  },
  components: {
  	multiChoice: multiChoice
  },
  methods: {
  	sayIsCool(item) {
    	alert(item + ' is cool!')
    }
  }
})