vue-simple-suggestでサジェストが遅すぎて使い物にならなかった

目的

前回の記事でvue-simple-suggestの導入をしたんですが、サジェストが遅すぎて使い物にならなかったので（私の実装方法が悪い）改善しました。
前回の記事

原因

フォームに入力する度に、APIを叩いてサジェストの候補を呼び出していた。

遅すぎて使い物にならなかったコード

form.vue

<template>
    <div class="form-group">
        <vue-simple-suggest
            v-model="selected"
            :list="getSuggestionList"
            :filter-by-query="true">
            <input type="text" name="tag" id="tag" placeholder="タグを入力してください" autocomplete="off">    
        </vue-simple-suggest>
    </div>
</template>
<script>
import VueSimpleSuggest from "vue-simple-suggest";
import 'vue-simple-suggest/dist/styles.css';

export default {
    components: {
        VueSimpleSuggest
    },
    data() {
        return {
            selected: '',
            List:'',
        };
    },
    methods: {
        async getSuggestionList() {
            return await axios.get('/api/tagList')
            .then(res => this.List = res.data )
            .catch((error)=>{
                this.errorMsg = 'Error! Could not reach the API. ' + error
                console.log(this.errorMsg)
            })
        },
    }
}
</script>

解決方法

フォームに入力する度にAPIを呼び出すのではなくて、コンポーネントが呼び出された時に一度だけAPIを叩く。
createdで呼び出すことで、インスタンスを作成した後に一度だけ呼び出して配列に格納します。

form.vue

<template>
    <div class="form-group">
        <vue-simple-suggest
            v-model="selected"
            :list="List" <!--メソッドを呼び出すのではなく配列を呼び出す-->
            :filter-by-query="true">
            <input type="text" name="tag" id="tag" placeholder="タグを入力してください" autocomplete="off">    
        </vue-simple-suggest>
    </div>
</template>
<script>
import VueSimpleSuggest from "vue-simple-suggest";
import 'vue-simple-suggest/dist/styles.css';

export default {
    components: {
        VueSimpleSuggest
    },
    data() {
        return {
            selected: '',
            List:'',
        };
    },
    methods: {
        //async getSuggestionList() {
        //    return await axios.get('/api/tagList')
        //    .then(res => this.List = res.data )
        //    .catch((error)=>{
        //        this.errorMsg = 'Error! Could not reach the API. ' + error
        //        console.log(this.errorMsg)
        //    })
        //},
    },
    /*-----------以下のコードを追加-------------------*/
    created(){
        axios.get('/api/tagList')
        .then(res => this.List = res.data )
        .catch((error)=>{
            this.errorMsg = 'Error! Could not reach the API. ' + error
            console.log(this.errorMsg)
        })        
    }
}
</script>

失敗した方法

最初、createdではなくwindow:onloadを使って画面ロード時にAPIを呼び出そうとしたら配列が空のままでした。

form.vue

<template>
    <div class="form-group">
        <vue-simple-suggest
            v-model="selected"
            :list="List"
            :filter-by-query="true">
            <input type="text" name="tag" id="tag" placeholder="タグを入力してください" autocomplete="off">    
        </vue-simple-suggest>
    </div>
</template>
<script>
import VueSimpleSuggest from "vue-simple-suggest";
import 'vue-simple-suggest/dist/styles.css';

export default {
    components: {
        VueSimpleSuggest
    },
    data() {
        return {
            selected: '',
            List:'',
        };
    },
    methods: {
        window:onload = function() {
            axios.get('/api/tagList')
            .then(res => this.List = res.data )
            .catch((error)=>{
                this.errorMsg = 'Error! Could not reach the API. ' + error
                console.log(this.errorMsg)
            })
        },
    }
}
</script>

この方法だとインスタンスが作成される前に呼び出されてしまうため、ダメだったようです。
vueのライフサイクルしっかり学ばなきゃ。。。