Vue-multiselect Template

Example fiddle for issue reproduction usage

HTML

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js"></script>
<link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/vue-multiselect.min.css">
<script src="https://unpkg.com/[email protected]/dist/vue-multiselect.min.js"></script>
<div id="app">

  <multiselect 
    v-model="value" 
    :options="options"
    :multiple="true"
    track-by="library"
    :custom-label="customLabel"
    >
                  <template v-slot:option="{option, search}">
                <div class="p-2 m-n2" @mouseenter="highlight(option)" @mouseout="unHighlight(option)">{{ option }}</div>
              </template>
  </multiselect>
  <pre>{{ value }}</pre>
  <div style="margin-top:50px">
  <pre>Test: {{testMe}}</pre>
  </div>
  
</div>

CSS

* {
  font-family: 'Lato', 'Avenir', sans-serif;
}

Babel + JSX

new Vue({
	components: {
  	Multiselect: window.VueMultiselect.default
	},
	data: {
  	testMe:'',
  	value: { language: 'JavaScript', library: 'Vue-Multiselect' },
  	options: [
    	{	language: 'JavaScript', library: 'Vue.js' },
      { language: 'JavaScript', library: 'Vue-Multiselect' },
      { language: 'JavaScript', library: 'Vuelidate' }
    ]
	},
  methods: {
  	customLabel (option) {
      return `${option.library} - ${option.language}`
    },
    highlight (option){
    this.testMe = option
    },
    unHighlight (option){
    this.testMe = ''
    }
  }
}).$mount('#app')