关于vue的data创建问题

Question

最近想用vue来写项目，其中在创建data的时候我先创建了个空数组：

            data () {

                return {

                    items:[]

                }

            },      

然后在create的时候，放数据进去：

            for(var i = 0;i<30;i++){

                this.items[i] = {

                    item:i,

                    blowUp:false,

                    show:0,

                    backgroundColor:'white',

                }

            }

这样写@click之类的通过method可以改变items的属性，但是页面没有显示出样式的变化。然后纠结了很久，在create的时候换了另外一种写法：

            for(var i = 0;i<30;i++){

                this.items.push({

                    item:i,

                    blowUp:false,

                    show:0,

                    backgroundColor:'white',

                })

            }

换成push之后，通过method改变items的属性可以实时在页面体现出来。
然后我在create之后，打印两者数据，发现是这样的
第一种：

第二种:

我实在不能理解为什么这两种写法会出现这样的区别，有没有大神可以解释下