【Vue.js】v-bindによるデータ連携

<template>
    <div>
        <ul>
            <li v-for="trendWord in trendWords">
                <a v-bind:href="searchUrl + encodeURI(trendWord)">search</a>
            </li>
        </ul>
    </div>
</template>

<script>

    export default {
        created() {
            this.getTrendWords()
        },
        data() {
            return {
                trendWords: [],
                searchUrl: "https://www.google.com/search?q=",
            }
        },
        methods: {
            getTrendWords() {
                axios
                    .get('/api/trend-word/list') //架空のURL
                    .then(res =>  {
                        this.trendWords = res.data
                    })
            }
        }
    }
</script>