Customize vue-multiselect with Search Input and Show only count of selected tags

Question

I have large list of taggable to select and add the tags to select options list if searched tag item not found in the option list. I want to customize the vue-multiselect.js to show search Input and only the selected counts in the input field instead of all the selected taggable. Use checkbox in each option to select and unselect the taggable.

I have created codepen link

I am looking to customize the vue-multiselect similar to the bootstrap multiselect show in the image. Tags are dynamically added to the select options list. If on search not found it will add to the list and check the checkbox of the tag item.

<div id="app">
  <multiselect 
    select-Label=""
    selected-Label=""
    deselect-Label=""
    v-model="value" 
    :options="options"
    :multiple="true"
    track-by="library"
    :custom-label="customLabel"
    :close-on-select="false"
    @select=onSelect($event)
    @remove=onRemove($event)
    >
    <span class="checkbox-label" slot="option" slot-scope="scope" @click.self="select(scope.option)">
      <input class="test" type="checkbox" v-model="scope.option.checked" @focus.prevent/>
      {{ scope.option.library }}
    </span>
  </multiselect>
  <pre>{{ value }}</pre>
</div>