Vue js v-autocomplete неправильно обновляет динамически измененные элементы

Question

Я пытаюсь интегрировать v-autocomplete форму выбора с динамически загружаемыми элементами в моем компоненте Vue на основе ввода текста.Данные для элементов получены из http get и проверены на правильность.Сначала элементы выглядят хорошо, но как только я укажу свой ввод, я получаю ноль элементов внутри компонента, хотя полученные данные содержат больше нуля записей.Я застрял в этом в течение последних нескольких часов, поэтому помощь будет оценена!: -)

Ниже я перечислил соответствующие части кода и два изображения, иллюстрирующие проблему.Над полем ввода текста я распечатал первое совпадение входных данных, которые на втором фото отсутствуют.Я думаю, что с компонентом v-autocomplete что-то не так, но не могу понять, что.

<!-- 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>

Это остальная часть кода:

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)
            });
        }
    }
}

И вотдва изображения:

Вот это работает -> https://imgur.com/z9GgQ1y

Вот это не работает -> https://imgur.com/B9EN7ms