vue.js里用computed属性自动求和，如何在每个输入框下显示对应的数值区间？

Question

小弟小白一枚，最近在学习vue.js,写了3个输入框做自动求和,现在可以实现对第一列输入框做自动求和。现在想到一个需求，在每个输入框下面显示对应的数值区间，如下图所示：

这样就可以知道每一个group所在的区间范围，比如第一个group在[0 ~ 10%), 第二个group在[10% ~ 30%).
小弟现在没有什么思路，写了一些代码如下：

<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>

请各位大神指点一下，这种情况代码应该如何修改，小弟基础薄弱，请多指教，感谢

Answer 1

// template
<div v-for="(item, index) in inputValues"> <!-- vue1.0的话item和index的位置需要换一下(index, item) -->
    <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; i++) {
            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}%)`
    }
}

Answer 2

这个 逻辑 无法通过一个计算属性来 搞定，因为对于了三个数据，要么使用3个计算属性，没必要
要么使用方法，把参数传入