问复选框列表不会在动态生成的复选框数组v-model中更新

EN

<el-col :span="24">
   <el-form-item class="permission-item" :span="24" :key="perm.name" v-for="perm in permissions" :label="perm.name">
       <el-switch v-model="role_permissions[perm.name]" />
   </el-form-item>
</el-col>

<el-col :span="8">
  <el-row>
    <el-col :span="24">
        <el-form-item label="Role Name" prop="name">
          <el-input v-model="role.name"/>
        </el-form-item>
    </el-col>
  </el-row>
</el-col>

export default {
    data() {
      return {
        role: this.role,
        permissions: [],
        role_permissions: {}
      };
    },
    methods: {
      getRole: async function(){
        //Inside axios ajax
        this.role = response.data.role;
      },
      getPermissions: async function(){
        //Inside axios ajax   
        this.permissions = response.data.permissions;          

        //Init the array with the values
        for(var i = 0; i < this.permissions.length; i++){
          this.role_permissions[this.permissions[i].name] = this.hasPerm(this.permissions[i].name);
        }        
      },
      hasPerm(name){
        for(var i = 0; i < this.role.permissions.length; i++){
          if(name === this.role.permissions[i].name){
            return true;
          }
        }
        return false;
      }
    },
    mounted() {
      this.getRole();
      this.getPermissions();
    },
  }