MultiSelect.vue

<template>
	<div class="MultiSelect">
		<ul class="MultiSelect__ul">
			<li
			class="MultiSelect__li"

			v-for="(item, index) in value" >
				<span class="MultiSelect__li-text">{{ (Array.isArray(options) ? item : options[item]) }}</span>
				<button class="MultiSelect__li-btn" @click="value.splice(index, 1)">x</button>
			</li>
		</ul>

		<select class="MultiSelect__select" ref="select" :name="name" :id="id" @change="updateValue">
			<option class="MultiSelect__option MultiSelect__option--default" ref="default" selected="selected">{{ defaultText }}</option>
			<option
			class="MultiSelect__option MultiSelect__option--custom"

			v-for="(option, index) in options"

			:disabled="value.indexOf((Array.isArray(options) ? option : index)) >= 0"
			:value="(Array.isArray(options) ? option : index)"
			>{{ option }}</option>
		</select>
	</div>
</template>

<script>
export default {
	name: 'MultiSelect',
	data() {
		return {
			value: []
		};
	},
	props: {
		defaultText: {
			default: 'Bitte Wählen',
		},
		options: {
			default: () => [],
		},
		name: {
			type: String,
			default: '',
		},
		id: {
			type: String,
			default: '',
		}
	},
	methods: {
		updateValue(ev) {
			this.value.push(this.$refs.select.value);
			this.$emit('input', this.value);
			this.$refs.default.selected = true;
		}
	}
}
</script>

<style lang="scss">
.MultiSelect {
	&__ul {
		list-style: none;
		margin: 0;
		padding: 0;
	}
	&__li {
		padding: .24em 0;
		border-bottom: 1px solid black;

		&-btn {
			float: right;
		}

		&:last-child {
			border-bottom: 0;
		}
	}
}
</style>