Vue.jsでデータが表示されません...

Question

やりたいこと

デベロッパーツールでは以下のように表示され、itemsにデータは入っているはずなので、
「hoge」が31個表示されると思うのですが、何も表示されません...。

後述のソースコードのどこが間違っているのか、教えてください。

ソースコードでやっていること

• 指定した月の予定を取得する
• 月の日数（3月であれば31日分）の空の配列を用意する
• 用意した配列に、取得した予定を、日付をインデックスとして追加する

ソースコード

//calender.vue
<template>
    <section class="calender">
        <ul>
            <li v-for='item in items'>hoge</li>
        </ul>
    </section>
</template>

<script>
    export default {
        data() {
            return {
                items: []
            }
        },
        mounted() {
            this.year = new Date().getFullYear();
            this.month = new Date().getMonth() + 1;
            this.getData(this.year, this.month);
        },
        methods: {
            getData(year, month) {
                var _this = this;
                var endpoint = '/api/schedule/' + year + '/' + month;
                $.ajax({
                    url: endpoint,
                    type: 'GET',
                    dataType: 'json',
                })
                .then( function(data) {
                    _this.process(data);
                })
            },
            process(data) {
                var _this = this;
                var dt = new Date(_this.year, _this.month, 1);
                dt.setDate(dt.getDate() - 1);
                var maxDate = dt.getDate();

                for (var i=0; i<maxDate; i++) _this.items[i] = [];

                data.forEach(function(value) {
                    var date = new Date(value['date']).getDate();
                    _this.items[date].push(value);
                });
            }
        }
    }
</script>

Answer 1

自己解決しました。
公式ドキュメント - リストレンダリングより

JavaScript の制限のため、Vue は配列で以下の変更を検出することはできません:

1. インデックスでアイテムを直接設定するとき。例: vm.items[indexOfItem] = newValue
2. 配列の長さを変更するとき。例: vm.items.length = newLength

とあったので、それぞれpush、spliceを使って書き換えました。

//before
for (var i=0; i<maxDate; i++) _this.items[i] = [];

//after
for (var i=0; i<maxDate; i++) _this.items.push([]);

//before
_this.items[date].push(value);

//after
_this.items[date].push(value);
_this.items.splice(date, 1, _this.items[date]);