How to bind v-model data to the input box generated by v-for loop

my younger brother has encountered some problems in learning vue.js, recently. As shown in the following figure, I use the v-for loop to generate three rows and two columns of the input box. Now I want to automatically sum the input box of the first column. The second column does not do anything. How should I use v-model for data binding? For example, in the first column, I type 1, 2, 2, 3, respectively, and the page will show that the sum is 6.

in real time.

this is the test code I wrote. Now it is impossible to bind the data in the first column bidirectionally. Please take a look at how to modify

<template>
  <div id="app">
    <form action="" :model="inputValues" >
      <div v-for="item in inputValues">
        <input type="text" v-model="item.percentage" placeholder="percentage">
        <input type="text" v-model="item.group" placeholder="group">
      </div>
    </form>
    <span>{{sumValue}}</span>
  </div>
</template>

<script>
    export default {
      data() {
        return {
          inputValues: [
            {
              percentage:"",
              group:""
            },
            {
              percentage:"",
              group:""
            },
            {
              percentage:"",
              group:""
            }
          ]
        }
      },
      computed: {
        sumValue() {
          const number1 = Number.isNaN(parseFloat(this.inputValues.percentage))
            ? 0 : this.inputValues.percentage;
          const number2 = Number.isNaN(parseFloat(this.inputValues.percentage))
            ? 0 : this.inputValues.percentage;
          const number3 = Number.isNaN(parseFloat(this.inputValues.percentage))
            ? 0 : this.inputValues.percentage;
          return number1 + number2 + number3
        }
      }
      
      //,
      // <div v-for="(item,index) in inputValues">
      // <input type="text" v-model="item[index].percentage" placeholder="percentage">
      // <input type="text" v-model="item[index].group" placeholder="group">
      // </div>
      // ....
      // computed:{
      //   sumValue() {
      //     var sum = 0;
      //     this.inputValues.foreach((item)=>{
      //       sum +=  Number.isNaN(parseFloat(this.item[index].percentage))
      //              ? 0 : this.item[index].percentage;
      //     })
      //     return sum;
      //   }
      // }
    }
</script>

my brother"s foundation is not good. Please take a look at the code and teach you how to modify it. Thank you

Vue.js

Mar.09,2021

sumValue() { var sum = 0; this.inputValues.foreach((item)=>{ sum += Number.isNaN(parseFloat(item.percentage)) ? 0 : parseFloat(item.percentage); }) return sum; }