动态添加二维数组页面无法显示问题

问题描述1：二维数组为接口请求数据，打印可以拿到数据，页面不显示，可能是异步请求导致，最后使用async、await

<ul class="actionList">
        <li v-for="(item,index) in linkageRule" :key="index">
          <div class="flex-between">
            <span>{{item.deviceName}}</span>
            <el-button type="text" @click="delDevice(index)">移除</el-button>
          </div>
          <el-checkbox-group v-model="item.action">
            <el-checkbox-button v-for="(ss, index) in item.ruleActive" :label="ss.deviceAction" :key="index">{{ss.deviceActionStr}}</el-checkbox-button>
          </el-checkbox-group>
        </li>
      </ul>

 async submitDataScope() {
      if(this.isMultiple){
        this.linkageRule = await Promise.all(this.sortArr(this.$refs.chooseDevice.deviceList))
      }else {
        let temp = this.$refs.chooseDevice.singleDevice
        this.deviceName = temp.deviceName
        this.cameraForm.deviceId = temp.deviceId
        this.$refs.deviceInfo.$emit('el.form.change')
        this.cameraForm.alarmType = this.businessArr.find(i => i.deviceType === temp.deviceType).businessCode
        this.getEvent(this.cameraForm.alarmType)
      }
      this.openDataScope = false
    },
sortArr(arr){
      let temp = arr.map(async item => {
        // item.action = []
        this.$set(item, 'action', [])
        if(!item.ruleActive){
          let res = await linkageRoleActive({deviceType:item.deviceType})
          if(res.code === 200){
            item.ruleActive = res.data
          }else {
            this.$message.error(res.msg)
          }
        }
        return item
      })
      return temp
    },

问题描述2：动态生成 el-checkbox 点击无法赋值问题
官方说法：Vue 不允许在已经创建的实例上动态添加新的根级响应式属性
可使用Vue.set(object, key, value) 方法将响应属性添加到嵌套的对象上

// item.action = []   最先使用此方法数据无法绑定
this.$set(item, 'action', [])