Javascript vuejs中的多维模型数组

我正在使用vuejs创建一个用于开发反应式组件的laravel应用程序。我非常熟悉jquery，但对vuejs不太熟悉。在遇到vuejs时，我发现一些操作需要jquery中大量的代码行，在vuejs中只需要一个或简单的命令。因此，我创建了反应式表单，需要使用一维模型进行动态输入。但在为多维模型升级时，我遇到了一些问题。 组件代码如下所示

        <div class="container">
        <button @click="addnewbatch()">Add Batch</button>
        <div class="card" v-for="(batch,index) in jiggerbatches" :key="index">
            <div class="card-header row">
                <div class="col"><input type="number" id="machineNo"></div>
                <div class="col"><button @click="removebatch(index)">Remove</button></div>
            </div>
            <div class="card-body">
                <div class="row">
                    <div class="col"><button @click="addanotherlot(index)">Add another lot</button></div>
                </div>
                <div class="row" v-for="(lotsplit,jindex) in jiggerbatches[index].batches" :key="jindex">
                    <div class="col"><input type="text" disabled></div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
    export default {
        name: "processdetailupdate",

        data() {
            return {
                jiggerbatches: [{
                    machineNo: "",
                    batches: [{
                        client: ""
                    }]
                }]}
        },

        methods: {
            addnewbatch: function () {
                this.jiggerbatches.push([{
                    machineNo: "",
                    batches: [{
                        client: ""
                    }]}])
            },

            removebatch: function (index) {
                this.jiggerbatches.splice(index,1)
            },

            addanotherlot: function (index) {
                this.jiggerbatches[index]['batches'].push({
                        client: ""
                    })
            },
        }
    }
</script>

添加批次
去除
再加一批
导出默认值{
名称：“processdetailupdate”，
数据（）{
返回{
Jigger批次：[{
machineNo:“，
批次：[{
客户：“
}]
}]}
},
方法：{
addnewbatch:函数（）{
这个是.jigger.push([{
machineNo:“，
批次：[{
客户：“
}]}])
},
removebatch:函数（索引）{
this.jiggerbatches.splice（索引，1）
},
addanotherlot:函数（索引）{
此.jiggerbatches[索引]['batches'].push({
客户：“
})
},
}
}

在添加另一批后，第一批中的效果非常理想。但是添加另一个批会生成一个没有输入的空行，单击addanotherlot会引发一个错误

[Vue warn]: Error in v-on handler: "TypeError: this.jiggerbatches[index].batches is undefined"

found in

---> <Processdetailupdate> at resources/js/components/processdetailupdate.vue
       <Root>

[Vue warn]：v-on处理程序中的错误：“TypeError:this.jiggerbatches[index]。批次未定义”
发现于
--->位于resources/js/components/processdetailupdate.vue

请帮助，我已经完成了其他模块，对此一无所知。单击addbatch时，必须再次创建整个卡多次。单击addlotno时，必须在单击阵列的同一卡中再次创建包含阵列的最后一个元素