element ui checkbox 多选框相关问题

相同的代码，我要是单独拎出来使用是没有问题的，可以正常点击，但是我要是嵌套在我的页面中会发现无法点击复选框，只是可以赋默认值

<body>
<div id="radio">
              <div>
                <el-button id="setPermissions" class="InsideBt" onclick="setPermissions()" type="info" plain>
                      设置权限
                </el-button>
              </div>
              <div>
                    <div style="margin-top: 20px">
                      <el-checkbox-group v-model="checkboxGroup1" size="mini" >
                        <el-checkbox-button v-for="city in cities" :label="city" :key="city">{{city}}</el-checkbox-button>
                      </el-checkbox-group>
                    </div>
                    <div style="margin-top: 20px">
                      <el-checkbox-group v-model="checkboxGroup2" size="mini" >
                        <el-checkbox-button v-for="city in cities" :label="city" :key="city">{{city}}</el-checkbox-button>
                      </el-checkbox-group>
                    </div>
                    <div style="margin-top: 20px">
                      <el-checkbox-group v-model="checkboxGroup3" size="mini" >
                        <el-checkbox-button v-for="city in cities" :label="city" :key="city">{{city}}</el-checkbox-button>
                      </el-checkbox-group>
                    </div>
              </div>

     </div>
</body>

<script>
  const cityOptions = ['读', '写', '执行'];
  new Vue({
  el: '#radio',
  data () {
      return {
        checkboxGroup1: ['读'],
        checkboxGroup2: ['读'],
        checkboxGroup3: ['读'],
        cities: cityOptions
      };
    }
})

</script>

下图是我将其放入我的页面中就无法点击，页面控制台也没有报错

请问我该如何排查这个问题？

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>Vue2+ElementUI Demo</title>
  <link rel="stylesheet" href="https://unpkg.com/element-ui@2.15.13/lib/theme-chalk/index.css">
</head>

<body>
<div id="radio">
    <div>
        <el-button id="setPermissions" class="InsideBt" onclick="setPermissions()" type="info" plain>
            设置权限
        </el-button>
    </div>
    <div>
        <div style="margin-top: 20px">
            <el-checkbox-group v-model="checkboxGroup1" size="mini" >
                <el-checkbox-button v-for="city in cities" :label="city" :key="city">{{city}}</el-checkbox-button>
            </el-checkbox-group>
        </div>
        <div style="margin-top: 20px">
            <el-checkbox-group v-model="checkboxGroup2" size="mini" >
                <el-checkbox-button v-for="city in cities" :label="city" :key="city">{{city}}</el-checkbox-button>
            </el-checkbox-group>
        </div>
        <div style="margin-top: 20px">
            <el-checkbox-group v-model="checkboxGroup3" size="mini" >
                <el-checkbox-button v-for="city in cities" :label="city" :key="city">{{city}}</el-checkbox-button>
            </el-checkbox-group>
        </div>
    </div>

</div>
  <script src="https://unpkg.com/vue@2.7.14/dist/vue.js"></script>
  <script src="https://unpkg.com/element-ui@2.15.13/lib/index.js"></script>
  <script>
    const cityOptions = ['读', '写', '执行'];
    new Vue({
      el: '#radio',
      data () {
        return {
          checkboxGroup1: ['读'],
          checkboxGroup2: ['读'],
          checkboxGroup3: ['读'],
          cities: cityOptions
        };
      }
    })
  </script>
</body>
</html>

这个问题的回答你可以参考下: https://ask.csdn.net/questions/7451857
我还给你找了一篇非常好的博客，你可以看看是否有帮助，链接：element ui中复选框el-checkbox勾选不及时渲染问题
除此之外, 这篇博客: element-ui 表格嵌套checkbox中的 第一种方式 部分也许能够解决你的问题, 你可以仔细阅读以下内容或跳转源博客中阅读:

直接指定type为selection，并且在table标签中指定处理方法，即@selection-change="handleSelectionChange"

 <el-table-column
        type = 'selection'
        label="是否选中"
        width="55">
</el-table-column>

  handleSelectionChange:function(val) {
         this.multipleSelection = val;
         console.log(val)
 }

您还可以看一下钟洪发老师的鸿蒙版手机应用开发入门课程中的 046.复选框组件Checkbox小节, 巩固相关知识点