【报Bug】修改data的值，页面不更新

代码如下：
< radio-group >
< view class="option_cell" v-for="(item, index) in articleInfo.userVoteItemsList" :key="index" >
< view class="option_progress" :class="{'selection':item.checked}" :style="'width:'+item.voteRates+'%;'" >< / view >
< view class="option_cell_cell" >
< label class="radio" @click="onClick" :data-idx="index" >
< radio :checked="item.checked" color="#17B994" / >
< / label >
< view >
< text class="bl" >{{item.title}}< / text >
< text class="bl" >{{item.voteRates}}%< / text>
< / view >
< / view >
< / view >
< / radio-group >

js代码如下：
onClick(e) {
var index = e.currentTarget.dataset.idx;
var data = this.articleInfo.userVoteItemsList;
data.forEach(t => {
t.checked = false;
})
data[index].checked = true;
this.articleInfo.userVoteItemsList = data;
}

触发点击事件，data数据正常更改，:class="{'selection':item.checked}" 却没有出现预想效果

折腾许久，用下面方式解决上述问题

在< text class="bl" >{{item.voteRates}}%< / text>标签下加入< text class="bl" style="display: none;" >{{item.voteRate}}%< / text >

在data[index].checked = true; 下加入data[index].voteRate += 0.001;

触发点击事件，data数据正常更改，:class="{'selection':item.checked}" 也如愿出现相应效果

但是感觉后面加入的代码很多余，不知道是什么原因

工具HBuilderX 2.2.2 20190816 h5