wx小程序 实现自定义图标复选框组(vant weapp)

要实现以下如图效果

(简洁说明一下遇到的问题：参考vant weapp - Checkbox复选框 - 利用自定义图标<image slot="icon" src="{{ checked ? activeIcon : inactiveIcon }}" /> ===》 出现的问题：即使onChange之后value值是变了，但是页面中图标并未发生变化，后发现可能还是得setData才行)

以下是自己用的解决代码：
index.wxml ( direction："组"的排列方向 ；label-position:文本以图标为参考的位置；具体及其他请参考文档 )

<van-checkbox-group value="{{ result }}" bind:change="onChange" direction="horizontal">
     <van-checkbox use-icon-slot name="a" label-position="left">
        朋友圈推送
        <image slot="icon" src="{{ iconA }}"></image>
     </van-checkbox>
     <van-checkbox use-icon-slot name="b" label-position="left">
        公众号推送
        <image slot="icon" src="{{ iconB }}"></image>
     </van-checkbox>
   </van-checkbox-group>

index.js

data:{
	result: ['a', 'b'], // 推送方式
	inactiveIcon: '/static/icons/info/radio_n.png', // 未选择状态
    activeIcon: '/static/icons/info/radio_y.png', // 选中状态
    iconA: "/static/icons/info/radio_y.png", // 两个选项默认都是选中状态
    iconB: "/static/icons/info/radio_y.png",
},
methods: {
	onChange(event) {
      this.setData({
        result: event.detail,
        iconA: event.detail.indexOf('a') > -1 ? this.data.activeIcon : this.data.inactiveIcon,
        iconB: event.detail.indexOf('b') > -1 ? this.data.activeIcon : this.data.inactiveIcon
      });
    }
}