vue-multiselect с тегами и асинхронностью, перестает работать

Question

Я использую vue-multiselect, и я бы хотел, чтобы пользователь мог искать теги в базе данных, используя асинхронный доступ, и если они не находят то, что хотят, введите свой собственный тег. Это означает, что я использую тегирование и асинхронность. Он работает, как и ожидалось, пока я не добавлю тег, не найденный в, тогда aysnc больше не ищет. Если я удалю добавленный тег, то он снова выполнит асинхронный поиск..

<template>

    <div>
      <label class="typo__label" for="ajax">Async multiselect</label>
      <multiselect v-model="selectedTags" id="tags" label="name" track-by="code" placeholder="Type to search" open-direction="bottom" :options="tags" :taggable="true" @tag="addTag" :multiple="true" :searchable="true" :loading="isLoading" :internal-search="false" :clear-on-select="true" :close-on-select="false" :options-limit="300" :limit="3" :limit-text="limitText" :max-height="600" :show-no-results="false" :hide-selected="true" @search-change="asyncFind">
        <template slot="clear" slot-scope="props">
          <div class="multiselect__clear" v-if="selectedTags.length" @mousedown.prevent.stop="clearAll(props.search)"></div>
        </template><span slot="noResult">Oops! No elements found. Consider changing the search query.</span>
      </multiselect>
      <pre class="language-json"><code>{{ selectedTags  }}</code></pre>
    </div>

</template>


<script>
import axios from 'axios';
import Multiselect from 'vue-multiselect'

export default {
  components: {
    Multiselect
  },
  props: {
      userId: {
        type: Number,
        required: true
      },
    tagGroup: {
      type: String,
      required: true
    }
  },
  data () {
    return {
      selectedTags: [],
      tags: [],
      isLoading: false
    }
  },
  methods: {
    addTag (newTag) {
        const tag = {
          name: newTag
        }
        this.tags.push(tag)
        this.selectedTags.push(tag)
      },
      limitText (count) {
        return `and ${count} other tags`
      },
      asyncFind (query) {
        if( query.length > 3 ) {
          this.isLoading = true
         axios.get('/api/tags/'+this.tagGroup+'/'+query).then(response => {
            this.tags = response.data.results.map(a => {
               return { name: a.name.en };
            });
        })
       }
      },
      clearAll () {
        this.selectedTags = []
      }
  }
}

</script>

Я использую компонент дважды внутри другого компонента:

<user-tags v-bind:tagGroup="'industry'" :typeahead-activation-threshold="2" :userId="user.id" :isSearchable="true"></user-tags>


<user-tags v-bind:tagGroup="'expertise'" :typeahead-activation-threshold="2" :userId="user.id" :isSearchable="true"></user-tags>