如何讲checkbox中获取到的数据渲染出来？

目前在学习中，问题是使用checkbox，获取到数据后，将数组直接渲染可以实现，但是如果想用wx:for来渲染数组，在复选框点选之后wx:for部分好像不会因为数组改变而重新渲染，还是其他地方有问题，另外这种情况下渲染结果的顺序并不能按照先后排序，有没有什么办法能够使得渲染出来的数据顺序与复选框内容顺序一致，求解答，谢谢！

js代码如下：

// pages/demo16/demo16.js
Page({
  data: {
    list:[
      {
        id:0,
        name:"🍎",
        value:"苹果"
      },
      {
        id:1,
        name:"🍇",
        value:"葡萄"
      },
      {
        id:2,
        name:"🍌",
        value:"香蕉"
      }
    ],
    checkedList:[]
  },
  // 复选框的选中事件
  handleItemChange(e){
    this.setData({
      checkedList: e.detail.value
    })
  }
})

wxml代码如下：

<view>
  <checkbox-group bindchange="handleItemChange">
    <checkbox value="{{item.value}}" wx:for="{{list}}" wx:key="id">
      {{item.name}}
    </checkbox>
  </checkbox-group>
</view>
<view>选中的水果：{{checkedList}}</view>
<view>选中的水果：</view>
<view wx:for="{{checkedList}}" wx:key="id">{{item.value}}</view>

实际表现如下：三个选中，但是第二个试图用wx:for渲染结果失败了，这是第一个问题；然后点击顺序为香蕉苹果葡萄，想要实现的目标是按照复选框的顺序渲染为苹果葡萄香蕉，这个就是第二个问题