使用v-for指令渲染界面，数组数据更新后不渲染新数据问题

初学vue，只是想要假数据来模拟一下
目的：实现点击这个按钮就会在页面加载新数据
实现：直接在数组里,改变数组（push函数）来达到重新渲染页面的目的

1.页面v-for渲染代码

   <div class="cmt-item" v-for="item in comList"：key>
      <div class="cmt-title">
        {{ item.time }}
      </div>

      <div class="cmt-body">
        {{ item.body}}
      </div>

2.给按钮添加事件后
第一遍出错代码

 methods:{
          getCom()
          {

            var newComList=[
              { time:"第五楼 用户：匿名用户 发表时间：2020-08-20 16：11",
                body:"玩梗无聊"},
              { time:"第六楼 用户：匿名用户 发表时间：2020-08-20 16：11",
                body:"有点意思"},
              { time:"第七楼 用户：匿名用户 发表时间：2020-08-20 16：11",
                body:"快来对暗号"}
            ];
            this.comList.push(newComList); //comList data中父数组
            newComList="";
          }
      }
    }

3.点击加载后页面数据没有更新，利用工具查看数据是否存入父数组中

我们可以看到数据已经存到data中的数组中去了，但是仔细观察发现，后存进去的数据明显数据结构不对，所以这次渲染失败的原因可以确定是存储格式有问题，发现了问题所在就可以开始解决了
重新更改代码：

  methods:{
          getCom()
          {

            var newComList=[
              { time:"第五楼 用户：匿名用户 发表时间：2020-08-20 16：11",
                body:"玩梗无聊"},
              { time:"第六楼 用户：匿名用户 发表时间：2020-08-20 16：11",
                body:"有点意思"},
              { time:"第七楼 用户：匿名用户 发表时间：2020-08-20 16：11",
                body:"快来对暗号"}
            ];
            for(var j=0;j<3;j++)
            {
              this.comList.push(newComList[j])
            }
          }
      }
    }

4.运行成功，渲染界面成功，用工具看一下数据

结构一致

作为小白，我觉得我最缺少的能力就是如何分析出问题出在哪里，怎么造成的，如何解决
共勉