Javascript VueJs无法处理首次单击或首次事件

我能够创建这种动态元素。 我的目的是创建基于“count”的动态div，在该div中，我可以添加多个文本框

您会注意到，第一次单击时，它将不是预期的结果。但是当你第二次点击它时，它就会工作

我应该错过一些东西。但我不知道这是什么，因为我是vue的新手

下面是代码：

<div id="app">
    <button @click="populate">Populate</button>

        <div v-for="(input, act) in inputs" >
          Id 
          <div v-for="(i, ii) in input.items">

            <input type="text" v-model="i.name">
          </div>

          <button v-show="act > 0" @click=input_add(act)>Add</button>
        </div>
    {{inputs}}
  </div>


const app = new Vue({

  el: '#app',

  data: {
    inputs: [],
    counter: 0,
    count: 3
  },

  methods: {
    populate(){
      var x = 1
      while(x <= this.count){
        this.inputs.push(
          {
            id: this.counter + 1, 
            items: []
          }
        )
        this.input_add(x)
        this.counter++
        x++
      }
    },
    input_add(x){
      this.inputs[x].items.push(
        {
         name: null
        }
      )
    }
  }

})

居住于
身份证件
添加
{{inputs}}
const app=新的Vue({
el:“#应用程序”，
数据：{
输入：[]，
柜台:0,，
计数：3
},
方法：{
填充（）{
变量x=1
（x尝试将
var x=1
设置为
var x=0
——这样，它应该具有您在第二次单击initial时获得的功能