JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.16/vue.min.js"></script>

<div id="app">
  <div v-for="role in roles" class="role-row">
    <label>{{role.role_name}}</label>
    <hr>
    <div v-for="perm in role.perms">
      <input type="checkbox" :value="perm" v-model="checked_roles"> {{ perm.perm_name }}
    </div>
  </div>
  
  <p>Selected roles and perms</p>
  {{checked_roles}}
</div>

CSS

.role-row {
  margin-bottom: 20px;
}

JavaScript

new Vue({
  el: '#app',
  data: {
   	checked_roles: [],
    roles: [
      {
      	"role_id" : 1,
        "role_name" : 'Administrator',
        "perms" : [
        	{
          	"perm_id" : 1,
            "perm_name" : 'Create'
          },
          {
          	"perm_id" : 2,
            'perm_name' : 'Update'
          },
          {
          	"perm_id" : 3,
            'perm_name' : 'Delete'
          }
        ]
      },
      {
      	"role_id" : 2,
        "role_name" : 'Moderator',
        "perms" : [
        	{
          	"perm_id" : 1,
            "perm_name" : 'Create'
          },
          {
          	"perm_id" : 2,
            'perm_name' : 'Update'
          },
          {
          	"perm_id" : 3,
            'perm_name' : 'Delete'
          }
        ]
      }
    ]
  }
})