[Vuejs]-Vue nested for loop for checkbox-groups

Is this is what you are looking for? Just replace the below code in your CSB Rights.vue file to see the changes.

<template>
  <div id="authorization">
    <b-row class="m-5">
      <b-col v-for="group in rightGroups" :key="group.id" md="6" align="start">
        <b-card border-variant="dark">
          <template v-slot:header>
            <b-form-checkbox>
              <strong>{{ group.name }}</strong>
            </b-form-checkbox>
          </template>

          <b-form-checkbox v-for="rights in group.rights" 
          :key="rights.id" 
          v-model="rights.right">{{rights.caption}}</b-form-checkbox>
        </b-card>
      </b-col>
    </b-row>
  </div>
</template>
<script>
export default {
  data() {
    return {
      rightGroups: [
        {
          name: "Rechte für die Administration",
          id: 1,
          rights: [
            {
              caption: "Rechte verwalten",
              name: "reports",
              right: true,
              id: 1
            },
            {
              caption: "Rechte X",
              name: "admin.rightX",
              right: false,
              id: 2
            },
            {
              caption: "Rechte Y",
              name: "admin.rightY",
              right: false,
              id: 3
            },
            {
              caption: "Rechte Z",
              name: "admin.rightZ",
              right: false,
              id: 4
            }
          ]
        },
        {
          name: "Rechte für die Benutzerverwaltung",
          id: 2,
          rights: [
            {
              caption: "Benutzer verwalten",
              name: "user.recht",
              right: false,
              id: 1
            },
            {
              caption: "Recht X",
              name: "user.rightX",
              right: false,
              id: 2
            },
            {
              caption: "Recht Y",
              name: "user.rightY",
              right: false,
              id: 3
            },
            {
              caption: "Recht Z",
              name: "user.rightZ",
              right: false,
              id: 4
            }
          ]
        }
      ]
    };
  }
};
</script>

You should just change the second loop like this :

<b-form-checkbox v-for="right in group.rights" :key="right.id">{{right.name}}</b-form-checkbox>

This will be good..