select ​

<script>
export default {
	data () {
		return {
			selection: '',
			complexOptions: [
				{id: 1, name: 'One', color: 'red'},
				{id: 2, name: 'Two', color: 'blue'},
				{id: 3, name: 'Three', color: 'green'},
				{id: 5, name: 'Five', color: 'orange'},
			],
			activeComplexOption: 2,
		}
	}
}
</script>

<bunt-select name="a-select" label="Select something" v-model="selection" :options="['Delicious Pizza', 'All The Kebab', 'Burrrrrrito!', 'Noodles, Peking Duck', 'McKingC', 'Linsa mit Spätzle und Saita', 'Ice, Ice, Baby', 'Egg and bacon', 'Egg, sausage and bacon', 'Egg and Spam', 'Egg, bacon and Spam', 'Egg, bacon, sausage and Spam', 'Spam, bacon, sausage and Spam', 'Spam, egg, Spam, Spam, bacon and Spam', 'Spam, Spam, Spam, egg and Spam', 'Spam, Spam, Spam, Spam, Spam, Spam, baked beans, Spam, Spam, Spam and Spam', 'Lobster Thermidor aux crevettes with a Mornay sauce, garnished with truffle pâté, brandy and a fried egg on top, and Spam.']" />
<p>{{ selection }}</p>
<bunt-select id="select-complex" name="complex-select" label="complex select" icon="palette" v-model="activeComplexOption" :options="complexOptions" option-label="name">
	<template slot-scope="{ option }">
		<div class="name">{{ option.name }}</div>
		<div class="id" :style="{'background-color': option.color}">{{ option.id }}</div>
	</template>
</bunt-select>

<!-- add a div for all dropdowns to teleport to somewhere at the end of your html, preferably directly in <body> -->
<div id="bunt-teleport-target"></div>