Vuetify/VueJS - Autocomplete results not showing until input is cleared

Hi all. I'm at a loss here as to why this is happening.

When I type into the autocomplete input, my data gets fetched via axios fine, it populates "searchResults", but the results do not display until the input is cleared.

Autocomplete:

<v-slide-x-transition>
                            <v-autocomplete
                                :items="searchResults"
                                :loading="isSearching"
                                :search-input.sync="search"
                                color="primary"
                                hide-no-data
                                hide-selected
                                item-text="Description"
                                item-value="API"
                                label="Search"
                                placeholder="Start typing to Search"
                                prepend-icon="mdi-database-search"
                                return-object
                                class="ml-2 mt-2"
                                v-if="searchBox"
                            >
                                <template v-slot:item="data">
                                    <v-list-item-avatar>
                                        <v-icon>
                                            mdi-account
                                        </v-icon>
                                    </v-list-item-avatar>
                                    <v-list-item-content>
                                        <v-list-item-title v-html="data.item.first_name"></v-list-item-title>
                                        <v-list-item-subtitle v-html="data.item.last_name"></v-list-item-subtitle>
                                    </v-list-item-content>
                                </template>
                            </v-autocomplete>
                        </v-slide-x-transition>
                         	

Code:

    export default {
        name: 'navBar',
        data: () => ({
            searchBox: true,
            search: null,
            select: null,
            searchResults: [],
            isSearching: false,
        }),
        watch: {
            search (val) {
                this.querySelections(val);
            },
        },
        methods: {
            showSearch(){
                this.searchBox = true;
            },
            hideSearch(){
                this.searchBox = false;
                this.search = null;
                this.searchResults = [];
            },
            async querySelections(){
                this.isSearching = true;
                const res = await this.callApi('get', '/app/search?query='+this.search);
                if(!res.data){
                    this.searchResults = [];
                }else{
                    this.searchResults = res.data;
                }
                console.log(this.searchResults);
                this.isSearching = false;
            }
        },
        mounted(){
        }

}