I have a grid of v-autocomplete components which have a multiple attribute added. However, to try and keep the formating clean I shorten the length of whats shown by using the selection slot as shown:

          <v-autocomplete
        v-model="programModel"
        multiple
        density="compact"
        variant="outlined"
        hide-details
        color="primary"
        flat
        rounded
        label="Programs"
        :items="programData"
        item-title="program_name"
        return-object
        :rules="arrayRequiredRule"
        :readonly="!editableTopSectionModel"
      >
      <template v-slot:selection="{ item, index }">
        <span v-if="!index">{{ item.title }}</span>
        <span class="grey--text caption" v-else-if="index === 1">
           (+ {{programModel!.length - 1}} others)
        </span>
      </template>
    </v-autocomplete>

However, my form there is a button that will activate whether the v-autocompletes are editable or not by toggling readonly. The issue is if it is readonly true then a user cannot click the dropdown to see the potential options. Its unclear how to get around this to make this functional.