相关UI未在v-for中更新

Question

我的数据对象中有一个数组，push会有很多时间用户想要向其添加数据，而且它会完美呈现v-for。

问题是相关UI部分未更新，请参见下图：

这是页面的初始化，数组中有一个空对象

当我按add按钮panel-body时，不会使用新生成的v-for元素进行更新：

感谢

编辑：

当我用纯纯HTML编写代码（在代码中复制它）时，它看起来像这样，这是一个目标UI。

编辑2：

数据：

  data() {
    return {
      payment: {
        type: "check",
        checks: [{}]
      }
    }
  }

ui：

<div v-for="(check,index) in payment.checks">
  <br>
  <h5>
    index of array ->
    {{index}}
  </h5>
  <div class="form-group">
    <label class="col-md-3 control-label">
     something
    <label style="color:red">*</label>
    </label>
    <div class="col-md-9">
      <input type="text" class="form-control" v-model="check.amount" />
    </div>
  </div>

  <div class="form-group">
    <label class="col-md-3 control-label">
     someting else
    <label style="color:red">*</label>
    </label>
    <div class="col-md-9">
      <input type="text" class="form-control" v-model="check.dadada" />
    </div>
  </div>

  <div class="col-lg-8" style="padding-top: 3%;">
    <button v-on:click="payment.checks.push({})" class="btn btn-success" style="margin-right: 7%;">
    add
  </button>
  </div>
</div>