ant design vue 多选框获取不到值和多选失效

• 太坑了，太坑了，太坑了，直接上代码

<template>
  <div>
    <div :style="{ borderBottom: '1px solid #E9E9E9' }">
      <a-checkbox :indeterminate="indeterminate" :checked="checkAll" @change="onCheckAllChange"> Check all </a-checkbox>
    </div>
    <br />
    <a-checkbox-group v-model="checkedList" :options="plainOptions" @change="onChange" />
    <button @click="sub">提交</button>
  </div>
</template>
<script>
export default {
  data() {
    return {
      checkedList: [],
      indeterminate: true,
      checkAll: false,
      plainOptions:[
  { label: 'Apple', value: '1' },
  { label: 'Pear', value: '2' },
  { label: 'Orange', value: '3' },
],
      noCheck : false,
    };
  },
  methods: {
    onChange(checkedList) {
          if (checkedList.length!==0) {
      this.$set(this, 'noCheck', false);
    }
      this.indeterminate = !!checkedList.length && checkedList.length < this.plainOptions.length;
      this.checkAll = checkedList.length === this.plainOptions.length;
    },
    onCheckAllChange(e) {
          if (e.target.checked) {
        this.$set(this, 'noCheck', false);
        const arr = [];
        this.plainOptions.forEach(res => {
            if (!res.disabled) {
                // 全选时，将选项中的value值传给 checkedList
                arr.push(res.value);
            }
        });
        this.$set(this, 'checkedList', arr);
    } else {
        this.$set(this, 'checkedList', []);

    }
      Object.assign(this, {
        indeterminate: false,
        checkAll: e.target.checked,
      });
    },
    sub(){
      console.log(this.checkedList);
    }
  },
};
</script>