Проблема с vue hover

Есть компонент на vue - мультиселект. Решил изменить его кастомный значок - стрелку, через слоты. При наличии значения и когда курсор на компоненте, то должен появиться крестик для очистки. Так вот... вроде все получилось, но при наведении на сам крестик появился баг с быстрым его появлением и исчезанием...

https://jsfiddle.net/9xcj234o/

  <div id="app">
    <multi-select v-model="value"
                  track-by="id"
                  label="label"
                  :searchable="true"
                  :options="options"
                  @mouseover.native="hover = true"
                  @mouseout.native="hover = false"
                  >
      <template slot="caret" slot-scope="{ toggle }">
        <div v-if="checkCanClear" @mousedown.prevent.stop @click.stop="clear()" title="Очистить" class="multiselect__clear">
          <svg xmlns="http://www.w3.org/2000/svg" x="0px" y="0px" width="13" height="13" viewBox="0 0 50 50"><g id="surface1"><path style=" " d="M 9.15625 6.3125 L 6.3125 9.15625 L 22.15625 25 L 6.21875 40.96875 L 9.03125 43.78125 L 25 27.84375 L 40.9375 43.78125 L 43.78125 40.9375 L 27.84375 25 L 43.6875 9.15625 L 40.84375 6.3125 L 25 22.15625 Z "></path></g></svg>
        </div>
        <div v-else @mousedown.prevent.stop="toggle()" class="multiselect__select">
        </div>
      </template>
    </multi-select>
    {{hover}}
  </div>

new Vue({
    components: {
      MultiSelect: window.VueMultiselect.default
    },
    data: {
      value: '',
      hover: false,
      options: [
        { id: 1, label: 'Vue.js' },
        { id: 2, label: 'Vue-Multiselect' },
        { id: 2, label: 'Vuelidate' }
    ] 
  },
  methods: {
    clear(){
        this.value = ''
    },
  },
  computed: {
    checkCanClear() {
        return this.hover && this.value
    }
  }
}).$mount('#app')

Можно это как то исправить?