New data doesn't rerender when already focused. Bug with async data.

[JoshMoreno]

I'm populating the passing a list of suggestions to the data prop which get set in an async function.

Basically, I have a component that watches search, hits the api, and sets the suggestions which get passed to your component. But your component doesn't update list in your component until you re-trigger a focus event.

Component that uses v-suggest

<template>
    <v-suggest
            v-model="search"
            :data="this.suggestions"
    ></v-suggest>
</template>

<script>
    import { Suggest } from 'v-suggest'
    import axios from 'axios'

    export default {
        components: {
            'v-suggest': CustomVSuggest
        },
        data() {
            return {
                search: '',
                suggestions: [],
            }
        },
        methods: {
            getSuggestions: function() {
                return axios.get('/api/search/' + this.search)
                        .then(response => {
                            this.suggestions = response.data
                        })
            },
        },
        watch: {
            search: function(newValue, oldValue) {
                this.getSuggestions()
            }
        }
    }
</script>

The workaround I'm using right now is creating a component that extends yours and just calls this.focus() whenever data changes. And then of course using this in place of the v-suggest component.

Workaround component

<script>
    import { Suggest } from 'v-suggest'

    export default {
        extends: Suggest,
        watch: {
            data(newValue, oldValue) {
                this.focus()
            }
        }
    }
</script>

I think you can probably just add this to your methods.js

watch: {
    data(newValue, oldValue) {
        this.focus()
    }
}