migrate to vue3; autocomplete still needs work

assets/public/autocomplete.vue

@@ -1,60 +1,74 @@
 <template>
     <div class="control">
-        <Autocomplete ref="autocomplete" :data="data" :placeholder="placeholder" :field="field"
-            :loading="isFetching" open-on-focus
-            @typing="fetch" @select="object => onSelect(object)"
-            >
-        </Autocomplete>
-        <input v-if="valueField" ref="value" type="hidden" :name="valueField"
-            :value="selected && selected[valueAttr || valueField]" />
+        <datalist :id="listId">
+            <template v-for="item in items" :key="item.path">
+                <option :value="item[field]"></option>
+            </template>
+        </datalist>
+        <input type="text" :name="name" :placeholder="placeholder"
+            :list="listId" @keyup="onKeyUp"/>
     </div>
 </template>
 
 <script>
-import debounce from 'lodash/debounce'
-import {Autocomplete} from 'buefy/dist/components/autocomplete'
+// import debounce from 'lodash/debounce'
 
 export default {
     props: {
         url: String,
         model: Function,
         placeholder: String,
-        field: {type: String, default: 'value'},
+        name: String,
+        field: String,
+        valueField: {type: String, default: 'id'},
         count: {type: Number, count: 10},
-        valueAttr: String,
-        valueField: String,
     },
 
     data() {
         return {
-            data: [],
+            value: '',
+            items: [],
             selected: null,
             isFetching: false,
+            listId: `autocomplete-${ Math.random() }`.replace('.',''),
         }
     },
 
     methods: {
-        onSelect(option) {
-            console.log('selected', option)
+        select(option, value=null) {
+            if(!option && value !== null)
+                option = this.items.find(item => item[this.field] == value)
+
             this.selected = option
             this.$emit('select', option)
         },
 
-        fetch: debounce(function(query) {
-            if(!query)
+        onKeyUp: function(event) {
+            const value = event.target.value
+            if(value === this.value)
+                return
+
+            if(value !== undefined && value !== null)
+                this.value = value
+                
+            if(!value)
+                return this.select(null)
+
+            this.fetch(value)
+        },
+
+        fetch: function(query) {
+            if(!query || this.isFetching)
                 return
 
             this.isFetching = true
-            this.model.fetchAll(this.url.replace('${query}', query))
-                .then(data => {
-                    this.data = data
-                    this.isFetching = false
-                }, data => { this.isFetching = false; Promise.reject(data) })
-        }),
-    },
-
-    components: {
-        Autocomplete,
+            return this.model.fetch(this.url.replace('${query}', query), {many:true})
+                .then(items => { this.items = items || []
+                                 this.isFetching = false
+                                 this.select(null, query)
+                                 return items },
+                      data => {this.isFetching = false; Promise.reject(data)})
+        },
     },
 }