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个该组件实例在运行吗？ 一旦我选择其中之一？其余的更改其UI（即占位符值）

这严格来说是一个ui问题，因为我可以告诉您该值保持不变，但是我似乎找不到找到显示该值的方法。

我希望这是足够的信息

如果需要，将提供其他代码。

谢谢。