Calculation of vue Multi-group data

for the requirement of test paper generation, try to implement it with vue. The
code is roughly structured as follows:

<div v-for="(big, index) in all" ><!--  -->

    :<input> :{{bigtotal}}
    
    <button @click="addsmall"></button>
    
    <div v-for="(question, index) in big.question" ><!--  -->
    
    :<input >
    
    </div>
    
</div>
<button @click="addbig"></button>

    var vu = new Vue({
        el: "-sharptodo-list-example",
        data: {
            all:[],
            onebig:{qtype:"",title:"xxx",bmark:0,questions:[]},//
            onesmall:{smark:0,stem:"",answer1:"",answer2:"",answer3:"",answer4:""}//
        },
        methods: {
            addbig: function() {//
               let onebig_str = JSON.parse(JSON.stringify(this.onebig));
               this.all.push(onebig_str);
                //....
            },
            addsmall: function(index) {// 
               let onebig_str = JSON.parse(JSON.stringify(vu.onesmall));
               this.all[index].questions.push(onebig_str);
                //....
                    });
            },
        }
    })

question: when the score of the small question is preset, the score of all the small questions within the big question will change. Modify the score of a small question, and the total score of the big question will be calculated automatically.
since all the big and small questions are generated by clicking the button push, there are two for loops here, how can I calculate the score?
ideas for implementation

<template> <div> <div v-for="(big, index) in all" :key="index" class="questions">  :<input @input="changeSmall(index, $event)"> :<input readonly v-model="big.bmark"> <button @click="addsmall(index)"></button> <div v-for="(question, index) in big.questions" :key="index"> :<input v-model="question.smark"> </div> </div> <button @click="addbig"></button> </div> </template> <script> export default { data () { return { all: [], onebig: { qtype: '', title: 'xxx', bmark: 0, questions: [] }, // onesmall: { smark: 0, stem: '', answer1: '', answer2: '', answer3: '', answer4: '' } // } }, watch: { all: { handler (newVal) { console.log(newVal) this.all.forEach(ele => { if (ele.questions.length > 0) { let smark = 0 ele.questions.forEach(e => { smark += parseInt(e.smark) }) ele.bmark = smark } }) return newVal }, deep: true } }, created () { }, methods: { addbig: function () { let onebig = JSON.parse(JSON.stringify(this.onebig)) this.all.push(onebig) this.onesmall.smark = 0 }, addsmall: function (index) { let onebig = JSON.parse(JSON.stringify(this.onesmall)) this.all[ index ].questions.push(onebig) }, changeSmall: function (index, e) { if (this.all[ index ].questions.length >= 1) { this.all[ index ].questions.forEach(ele => { ele.smark = e.target.value }) } else { // this.onesmall.smark = e.target.value } } } } </script> <style> input{ width: 200px; } .questions{ padding: 40px 0; border: 1px solid -sharpcccccc } </style>