Vue.js uses the computed attribute to automatically sum, how to display the corresponding value range under each input box?

Xiaobai, recently in the study vue.js, wrote 3 input boxes to do automatic summation, and now it is possible to do automatic summation for the first column input box. Now think of a requirement and display the corresponding value range at the bottom of each input box, as shown in the following figure:

in this way, we can know the interval range of each group, for example, the first group is in [0 ~ 10%) and the second group is in [10 ~ 30%).
I don"t have any ideas right now, so I have written some code as follows:

<template>
  <div id="app">
    <form action="" :model="inputValues">
      <br>
      <span>Total Percentage: {{sum}}</span>
      <div v-for="item in inputValues">
        <br>
        <input type="text" v-model="item.percentage" placeholder="percentage">
        <input type="text" v-model="item.group" placeholder="group">
        <br><br>
        //
        //{{sum}}
        <span> [{{previous_sum}}% ~ {{sum}}%)</span>
      </div>
    </form>

  </div>
</template>

<script>
    export default {
      data() {
        return {
          inputValues: [
            {
              percentage:"",
              group:""
            },
            {
              percentage:"",
              group:""
            },
            {
              percentage:"",
              group:""
            }
          ]
        }
      },
      computed: {
      //
        sum() {
          return  this.inputValues.reduce((total,value) => {
            return Number.isNaN(parseFloat(value.percentage)) ?
              total :
              total + parseFloat(value.percentage)
          },0);
        },
        

        //
        // previous_sum = sum - current_inputValues
        // = - 
        // 
        previous_sum(){
          var previous_sum = 0;
          this.inputValues.forEach((item)=>{
            previous_sum = sum - parseFloat(item.percentage);
          })
        }
      }
    }
</script>

Please give us some advice on how to modify the code in this situation. My brother"s foundation is weak. Please give me more advice. Thank you

// template <div v-for="(item, index) in inputValues">  <br> <input type="text" v-model="item.percentage" placeholder="percentage"> <input type="text" v-model="item.group" placeholder="group"> <br><br> <span> {{ format(index) }}</span> </div> // script methods: { format (index) { let p = 0 let val = this.inputValues for (let i = 0; i < index; iPP) { let cur = val[i].percentage if (!Number.isNaN(parseFloat(cur))) { p += parseFloat(cur) } } let a = p let cur = val[index].percentage if (!Number.isNaN(parseFloat(cur))) { a += parseFloat(cur) } return `[${p}%~${a}%)` } }