setting up v-autocomplete with search function - vue.js

Question

Trying to setup v-autocomplete, without a watcher, the flow would be:
Type a string, value is accepted by function
Function searches api for string and returns a list
List is put into "entries"
Computed property "tagsFound" is reevaluated.
"tagsFound" are displayed (since they are :items)
The main difference between the docs here and my code is my attempt to do this without a watcher rather with a simple function.
Relevant code:
<v-autocomplete
v-model="newTag"
:items="tagsFound"
:loading="loading"
:search-input.sync="search"
color="white"
hide-no-data
hide-selected
:placeholder="$t('search_terms.new_tag')"
></v-autocomplete>
...
data() {
return {
newTag: '',
entries: [],
....
methods: {
...
async search(term){
this.query.term = term
this.entries = await this.searchTerms(this.query)
},
...
computed: {
tagsFound(){
return this.entries
}
}
Expected behavior is search for the term typed and display the results as a dropdown.
Actual behavior is that it does not search and therefore does not display anything.

Answer 1

The sync modifier effectively makes a prop behave like v-model, so just like with v-model there's a prop and an event. The value needs to be a property, not a method, so :search-input.sync="search" doesn't make sense if search is a method.
The tagsFound computed property in your example isn't really doing anything. If you're just going to return entries you might as well just use entries directly in your template.
Not sure why you would want to do this without a watch but it can be done, either by splitting search-input.sync into a prop/event pair or by using a computed property with a getter and setter. The example below uses the latter approach.
function fakeServer (search) {
return new Promise(resolve => {
setTimeout(() => {
resolve([
'Red', 'Yellow', 'Green', 'Brown', 'Blue', 'Pink', 'Black'
].filter(c => c.toLowerCase().includes(search.toLowerCase())))
}, 1000)
})
}
new Vue({
el: '#app',
data () {
return {
newTag: '',
entries: [],
queryTerm: ''
}
},
computed: {
search: {
get () {
return this.queryTerm
},
set (searchInput) {
if (this.queryTerm !== searchInput) {
this.queryTerm = searchInput
this.loadEntries()
}
}
}
},
created () {
this.loadEntries()
},
methods: {
async loadEntries () {
this.entries = await fakeServer(this.queryTerm || '')
}
}
})
<link href="https://unpkg.com/vuetify#1.5.16/dist/vuetify.css" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900|Material+Icons" rel="stylesheet">
<script src="https://unpkg.com/vue#2.6.10/dist/vue.js"></script>
<script src="https://unpkg.com/vuetify#1.5.16/dist/vuetify.js"></script>
<div id="app">
<v-app>
<v-autocomplete
v-model="newTag"
:items="entries"
:search-input.sync="search"
></v-autocomplete>
</v-app>
</div>

Answer 2

In this part, you bind search-input to an async method, this is wrong. You need to bind search-input to a data field and create a watch over it.
<v-autocomplete
:search-input.sync="search"
></v-autocomplete>
Define your component like below:
data: function(){
return {
newTag: '',
entries: [],
searchInput: null
}
},
watch: {
searchInput(val){
this.entries = await this.searchTerms(val)
}
}
And v-autocomplete template:
<v-autocomplete
v-model="newTag"
:items="tagsFound"
:loading="loading"
:search-input.sync="searchInput"
color="white"
hide-no-data
hide-selected
:placeholder="$t('search_terms.new_tag')"
></v-autocomplete>
This is a working example I created on CodePen