我想实现这样的目标：

我做到了：

<template>
  <div>
    <label class="form-label">{{ label }}</label>
    <v-select
      v-model="selecteds"
      item-title="user_name"
      item-value="id"
      :items="items"
      multiple
    >
      <template #selection="data">
        <v-chip
          :key="data.item.id"
          closable
          :model-value="data.selected"
          :disabled="data.deleted_at"
        >
          <template #prepend>
            <v-avatar size="32" image="https://i.pravatar.cc/64" />
          </template>
          {{ data.item.title }}
        </v-chip>
      </template>
    </v-select>

    <input
      v-for="selected in selecteds"
      :key="selected.id"
      type="hidden"
      :name="label + '[]'"
      :value="selected.id"
    >
  </div>
</template>

但是这个实现有两个问题，当我关闭一个chip时，v-select打开，并且chip项不会从v-select的选中项中删除。
我也试过这个：

<template>
  <div>
    <label class="form-label">{{ label }}</label>
    <v-select
      v-model="selecteds"
      item-title="user_name"
      item-value="id"
      :items="items"
      chips
      closable-chips
      multiple
    >
      <template v-slot:prepend>
        <v-avatar size="32" image="https://i.pravatar.cc/64" />
      </template>
    </v-select>

    <input
      v-for="selected in selecteds"
      :key="selected.id"
      type="hidden"
      :name="label + '[]'"
      :value="selected.id"
    >
  </div>
</template>

这个实现如预期的那样工作，但是头像没有进入芯片的prepend插槽，而是进入了v-select。我希望头像在芯片中。有什么提示吗？