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" :items="items" solo clearable prepend-inner-icon="mdi-hammer-screwdriver" type="text" item-value="id">
      <template #item="{ item, on, attrs }">
      <v-list-item 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>
        <v-divider/>
      </template>
    </v-autocomplete>
  </v-app>
</div>

Vue

new Vue({
  el: "#app",
  vuetify: new Vuetify(),
  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: "",
    }
  },
})