Vue.js でリストを読み込む

Spring Boot + Doma2 で作ったapiを Vue.js から呼び出し、リストを構築してみた。
今まではjQueryのajaxを利用してapiのデータを受け取っていたが、今回はvue-resourceというものを利用してみた。

pickup.html

<table id="pickup" class="table table-bordered">
    <thead>
        <tr>
            <th></th>
            <th>タイトル</th>
            <th>開始日</th>
        </tr>
    </thead>
    <tbody>
        <tr v-for="item in items">
            <td><img src="{{ item.image }}" width="100" /></td>
            <td>{{ item.title }}</td>
            <td>{{ item.period}}</td>
        </tr>
    </tbody>
</table>
<a href="javascript:append();">append</a>
<script type="text/javascript" th:inline="javascript">/*<![CDATA[*/
    var list = [];
    new Vue({
        el: '#pickup',
        data: {
            items: list
        }
    })
    function append() {
        Vue.http.get('/api/pickup?offset=' + list.length).then((response) => {
            for (i = 0; i < response.body.length; i++) {
                list.push(response.body[i]);
            }
        });
    }
    append();
/*]]>*/</script>

今回は Thymeleaf を利用しているので、