<template>
  <v-app>
    <v-container class="mx-2">
      <v-row>
        <v-col>
          <v-autocomplete
            :items="list"
            density="compact"
            label="Label"
            title="Choose one"
            variant="outlined"
            v-model="model"
            item-title="n"
            item-value="id"
            hide-no-data
            @update:search="handleSeach"
          ></v-autocomplete>
        </v-col>
        <v-col>
          <v-btn @click="searchCount = 0">Clean Search Count</v-btn>
        </v-col>
        <v-col>Model: {{ model }} Search Count: {{ searchCount }}</v-col>
      </v-row>
      <v-row>
        <v-col>
          <ol>
            <li>Choose one in list</li>
            <li>Click outside autocomplete</li>
            <li>Search occurs two times</li>
          </ol>
        </v-col>
      </v-row>
    </v-container>
  </v-app>
</template>

<script setup lang="ts">
  import { ref } from 'vue'
  const model = ref(0)
  const searchCount = ref(0)
  const list = ref([{n: 'Choose one', id: 0},{ n: 'test', id: 1 }, { n: 'test2', id: 2 }, { n: 'test3', id: 3 }])

  function handleSeach(value: string) {
    searchCount.value++
    console.log(value)
  }
</script>