Как иметь несколько тегов автозаполнения vuejs

Question

У меня есть автозаполнение, которое работает, но я могу выбрать только один тег.Я хотел бы иметь несколько тегов с возможностью их удаления.

Кроме того, как только я выбрал свой тег, он дал мне идентификатор на входе.Я хотел бы имя.Я попытался ввести имя здесь: @ click = "setSerie (result.id)", но моей базе данных нужен идентификатор ...

Это мой компонент в vuejs

  <div>
    <input
      type="text"
      class="form-control"
      v-model="searchquery"
      v-on:keyup="autoComplete"
      autocomplete="off"
      @focus="modal = true"
      id="series"
      name="series"
      @input="autoComplete($event)"
    />
    <div class="panel-footer" v-if="data_results && modal">
      <ul class="list-group">
        <li
          v-for="result in data_results"
          class="list-group-item"
          @click="setSerie(result.id)"
        >{{ result.name }}</li>
      </ul>
    </div>
  </div>
</template>

<script>
export default {
  data: function() {
    return {
      searchquery: "",
      data_results: [],
      modal: false
    };
  },
  methods: {
    autoComplete(e) {
      this.data_results = [];
      if (this.searchquery.length > 0) {
        axios
          .get("/vuejs/autocomplete/search", {
            params: { searchquery: this.searchquery }
          })
          .then(response => {
            console.log(response);
            this.data_results = response.data;
          });
        this.$emit("input", e.target.searchquery);
      }
    },
    setSerie(searchquery) {
      this.searchquery = searchquery;
      this.modal = false;
      this.$emit("input", serie.id);
    }
  }
};
</script>```