vue-simple-suggestの機能を最小限で実装

#概要
Vue.jsでサジェスト機能を実装したくてやり方を調べていたら、vue-simple-suggestなるライブラリがあることが分かったので使ってみる。

インストール方法は公式参照
公式GitHub→https://github.com/KazanExpress/vue-simple-suggest

#環境
Vue.js 2.5.17
vue-simple-suggest 1.10.3
#実装
##全体

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>

##ポイント

form.vue

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

フォームに入力された文字がv-modelに入る
getSuggestionList()APIで引っ張ってきたlistが入る
これがないとうまくサジェストされません
<vue-simple-suggest></vue-simple-suggest>の中に<input>を実装のもポイント

form.vue

<script>
import VueSimpleSuggest from "vue-simple-suggest";  //忘れずにインポート
import 'vue-simple-suggest/dist/styles.css';        //忘れずにインポート

export default {
    components: {
        VueSimpleSuggest
    },
    data() {
        return {
            selected: '',  //入力された文字を格納
            List:'',       //getSuggestionList()で引っ張ってきた配列を格納
        };
    },
    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>

#最後に
困ったら公式ドキュメント！