vue3使用v-for生成多个el-radio-group时，数据的绑定问题

问题

在项目中，使用v-for生成多个el-radio-group，并用一个由ref组成的数组benefitRadio，来作为多个radio group的v-model。每个group在绑定时，用item的id属性来指定绑定值的下标。

界面代码如下：

      <el-scrollbar height="450px" :always="true">
        <div v-for="item in this.benefitTable" :key="item.id">
          <div class="ques-text">{{ item.question }}</div>
          <el-radio-group
            v-model="benefitRadio[item.id]"
            @change="handleRadioGroup($event, item.id)"
          >
            <el-radio :label="0">0</el-radio>
            <el-radio :label="1">1</el-radio>
            <el-radio :label="2">2</el-radio>
            <el-radio :label="3">3</el-radio>
            <el-radio :label="4">4</el-radio>
          </el-radio-group>
        </div>
      </el-scrollbar>

绑定值数组benefitRadio初始化代码如下：

    let benefitRadio = [];
    for (let i = 0; i < 15; i++) {
      benefitRadio.push(ref(-1));
    }

数组的每一项都是一个ref对象，初始化为-1，使得单选组在刚刚出现时，每个选项都处于未选中的状态。

但是，在点击选项之后，选项并不会变成正常的被选中状态，直到上下滚动或者前后页切换一下，选项的状态才会更新。

解决过程

起初用网上的方法，在radio group的@change事件函数中，增加this.$forceUpdate();

    handleRadioGroup($event, id) {
      console.log("radio-group changed:", $event, id);
      this.$forceUpdate();
      //todo
    },

但情况丝毫没有变化。@change函数在我的项目中是用不到的，理论上应该使用v-model绑定就足够。所以我想到可能是绑定值的问题。浏览器控制台的报错也基本能证明这一点，报错说v-model的值应该是bool,string,int，而不能是个对象。所以，我将绑定值作为单个ref对象，而把整个list放到一个ref里。

最终，初始化绑定值的代码如下：

    let benefitRadio = [];
    for (let i = 0; i < 15; i++) {
      benefitRadio.push(-1);
    }
    benefitRadio = ref(benefitRadio);

成功解决问题，选项在点击之后就能变为被选中状态。