Vue

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/vuetify/2.3.0-beta.4/vuetify.min.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/vuetify@2.x/dist/vuetify.min.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@mdi/font@4.x/css/materialdesignicons.min.css">
<div id="app">
  <v-app>
    <v-autocomplete v-model="formData.itemId" :filter="filterItems" :items="itemsWithDividers" solo clearable prepend-inner-icon="mdi-hammer-screwdriver" type="text" item-value="id">
      <template #item="{ item, on, attrs }">
      <v-divider v-if="item.divider"> </v-divider>
        <v-list-item v-else v-bind="attrs" v-on="on">
          <v-list-item-avatar class="elevation-1" size="64">
            {{ item.id }}
          </v-list-item-avatar>
          <v-list-item-content>
            <v-list-item-title> {{ item.text }} </v-list-item-title>
            <v-list-item-subtitle> {{ item.id }} </v-list-item-subtitle>
          </v-list-item-content>
        </v-list-item>
      </template>
    </v-autocomplete>
  </v-app>
</div>

Vue

new Vue({
  el: "#app",
  vuetify: new Vuetify(),
  computed: {
  	itemsWithDividers() {
    const itemsWithDividers = [];
      this.items.forEach((x, index, array) => {
        itemsWithDividers.push(x);
        if (index !== array.length - 1) {
          itemsWithDividers.push({
            divider: true,
          });
        }
      });
      return itemsWithDividers;
    },
  },
  data: {
    items: [
      { text: "Learn JavaScript", id:"1" },
      { text: "Learn Vue", id:"2" },
      { text: "Play around in JSFiddle", id:"3" },
      { text: "Build something awesome", id:"4" }
    ],
    formData: {
    	itemId: "",
    }
  },
  methods: {
  filterItems(item, queryText, itemText) {
  		if (item.divider) return;
      const { text, id } = item;
      const texts = [text, id];
      return texts.some((text) => text.indexOf(queryText) > -1);
    },
  }
})