vue вычисляемый заполнитель меняет несколько полей выбора

Question

Vue версия 2.6.10 Я попытаюсь написать код, который дает соответствующую информацию, чтобы не допустить ее большого размера

это часть моего компонента, связанная с полями выбора

<div class="input-field">
  <input
    :id="name"
    v-model="searchFilter"
    type="text"
    tabindex="-1"
    :class="{ searchbar: true, 'validation-error': validateError }"
    autocomplete="off"
    spellcheck="false"
    :disabled="disabled || loading"
    :readonly="single"
    :placeholder="placeholder"
    @click="openList"
  />
  <input-icon :loading="loading"></input-icon>
</div>

это вычисляемая часть, которая выполняет роль заполнителя

computed: {
  placeholder() {
    if (this.single) {
      const selected = this.singleList.filter(item => item.selected === true).shift();
      return selected === undefined ? `Select ${_.startCase(this.name)}` : selected.name;
    }
  },
},

Проблема в том, что, скажем, у меня запущено 3 экземпляра этого компонента?когда я выберу один из них?остальные меняют свой пользовательский интерфейс (он же значение заполнителя)

Это строго проблема пользовательского интерфейса, поскольку я могу сказать, что значение остается прежним, но я не могу найти способ доступа к этому значению, чтобы показатьэто.

Надеюсь, этого достаточно для продолжения

При необходимости предоставит дополнительный код.

Заранее спасибо.