Vue-multiselect

Example fiddle for issue reproduction usage

HTML

<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">
  <label class="typo__label">Simple select / dropdown</label>
  <multiselect v-model="value" :options="options" :close-on-select="false" :clear-on-select="false" :hide-selected="true" :preserve-search="true" placeholder="Pick some" label="label" trackBy="id" :preselect-first="true">
  <template slot="singleLabel" slot-scope="{ option }">
    <div class="option__desc">
      
      <span class="option__title"><i class="fas fa-circle" style="font-size: 20px"
         :style="{color: option.bgColor}"></i>{{ option.label }}</span>
    </div>
    </template>
  </multiselect>
  <pre class="language-json"><code>{{ value  }}</code></pre>
</div>

CSS

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

Babel + JSX

new Vue({
	components: {
  	Multiselect: window.VueMultiselect.default
	},
	data: {
  	value: '',
  	options: [
      {id: 'draft', label: 'Brouillon', bgColor: '#495057', color: '#ffffff', disabled: false},
      {id: 'pending', label: 'Modération', bgColor: '#c1bcbc', color: '#495057', disabled: false},
      {id: 'published', label: 'Publié', bgColor: '#ffd6d8', color: '#495057', disabled: false},
      {id: 'archive', label: 'Archivé', bgColor: '#bf1722', color: '#ffffff', disabled: false}
    ]
	},
  methods: {
  	customLabel (option) {
      return `${option.library} - ${option.language}`
    }
  }
}).$mount('#app')