Vue js v-autocomplete does not update dynamically changed items correctly

Question

I'm trying to integrate a v-autocomplete select form with dynamically loaded items in my Vue component based on text input. The data for the items is obtained from a http get and is tested to be correct. At first, the items appear to be fine, but once I further specify my input I start getting zero items within the component although the received data contains more than zero entries. I've been stuck at this for the last few hours, so help will be appreciated! :-)

Below I've listed the relevant parts of the code and two images which illustrate the issue. Above the text input field I have printed out the first match of the inputs, which at the second photo are missing. I think there is something wrong with the v-autocomplete component but can't figure out what.

<!-- The log -->
<div>{{locations[0]? locations[0].name : null}}</div>

<v-autocomplete
    item-value="osm_id"
    v-model="selectedLocationIndex"
    item-text="name"
    label="Location*"
    :items="locations"
    :search-input.sync="locationInput"
    placeholder="Start typing..."
    required
>
    <template slot="item" slot-scope="data">
         {{ data.item.name }}
    </template>
</v-autocomplete>

This is the rest of the code:

watch: {
    locationInput: function(newVal, oldVal) {
        this.locations = [];
        if (newVal !== null && newVal !== '') {
            this.getLocations(newVal).then((result) => {
                const hits = result.data.hits;
                hits.map(hit => {
                    this.locations.push(hit)
                })
            }).catch((err) => {
                console.log('we have obtained an error', err)
            });
        }
    }
}

And here are the two images:

Here it works -> https://imgur.com/z9GgQ1y

Here it doesn't -> https://imgur.com/B9EN7ms

Answer 1

Add the no-filter property.

<!-- The log -->
<div>{{locations[0]? locations[0].name : null}}</div>

<v-autocomplete
    item-value="osm_id"
    no-filter
    v-model="selectedLocationIndex"
    item-text="name"
    label="Location*"
    :items="locations"
    :search-input.sync="locationInput"
    placeholder="Start typing..."
    required
>
    <template slot="item" slot-scope="data">
         {{ data.item.name }}
    </template>
</v-autocomplete>