Vuetify v-autocomplete doesn’t render dynamic items

I have a dynamic list that gets updated upon search. I’ve tried using no-filter and :filter="v => v" and such solutions.

Problem: sometimes the list gets updated, sometimes it doesn’t. If I search for tra, it shows the list, but searching again for something else, it will show no data. If I click on the x icon to clear the input, it shows the list.

Debugging the Vue tools, I’ve seen that the items do get inserted into the dialog_payload.users. Nevertheless, it’s an issue with the autocomplete.

I’m searching for a way to force refresh the component.

Discord’s channel stated that it has something to do with Vue depth reactivity, but I’m already using splice & push to trigger it.

v-autocomplete

  <v-autocomplete no-filter v-model="item_payload.item" class="selection-controls-padding" solo flat hide-details :background-color="$vuetify.theme.dark ? '#292929' : '#edeff0'"
                                  label="Search by name, committee or role..." clearable hide-selected hide-no-data prepend-inner-icon="mdi-magnify" :search-input.sync="dialog_payload.search" append-outer-icon="mdi-cog"
                                  @click:append-outer="openFilters()" ref="test" :items="dialog_payload.users" return-object item-id="id" @change="dialog_payload.search = ''" item-text="title" :loading="dialog_payload.loading_list">
                                    <template v-slot:item="{index, item}">
                                        <v-list-item-avatar color="grey" size="30">
                                            <v-img v-if="item.profile_picture" :src="`${$Helper.files_paths.profile_pictures}${item.avatar}`"></v-img>
                                            <v-icon v-else size="24" color="white">mdi-account-circle</v-icon>
                                        </v-list-item-avatar>
                                        <v-list-item-content>
                                            <v-list-item-title>{{item.smart_name}}</v-list-item-title>
                                            <v-list-item-subtitle>{{item.full_name}}</v-list-item-subtitle>
                                        </v-list-item-content>
                                    </template>
                                </v-autocomplete>

watch

"dialog_payload.search"(newValue) {
            if (newValue && newValue !== "" && newValue.length > 1) {
                let app = this
                clearTimeout(app.dialog_payload.timeout)
                app.dialog_payload.timeout = setTimeout(function() {
                    app.dialog_payload.loading_list = true
                    app.getSuggestions(newValue)
                }, 400);
            }
        },


"item_payload.item"(newValue) {
            if (newValue) {
                let app = this
                app.dialog_payload.search = ""
                let found = app.item_payload.users.some(item => (item.id === newValue.id))
                if (!found) {
                    app.item_payload.users.push(newValue)
                }

                app.item_payload.item = null
                app.dialog_payload.users = []

            }
        }

Inside getSuggestion on then success

let users = response.data.users
                app.dialog_payload.users.splice(0)
                app.dialog_payload.users.push(...users)

                console.log(app.$refs.test)

                app.dialog_payload.loading_list = false