VueJs 2: map selected child checkboxes with the parent

I have multiple roles and their permissions (checkboxes). So now when I select some permissions from role I need to map these permissions to be associated with the their role.

JsFiddle

HTML:

<div id="app">
  <div v-for="role in roles" class="role-row" :key="role.id">
    <label></label>
    <hr>
    <div v-for="perm in role.perms" :key="perm.id">
      <input type="checkbox" :value="perm" v-model="checked_roles"> 
    </div>
  </div>

  <p>Selected roles and perms</p>
   // [ { "perm_id": 2, "perm_name": "Update" }, { "perm_id": 1, "perm_name": "Create" } ] 
</div>

VueJs:

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'
          }
        ]
      }
    ]
  }
})

Result: Here I'm getting selected checkboxes but also I need to map the role as a key

[ { "perm_id": 2, "perm_name": "Update" }, { "perm_id": 1, "perm_name": "Create" } ] 

Probably, I have to use computed property or watch method, but I'm new in the VueJs and I tried multiple times to resolve this, but without result.

if I pass: :value="{role, perm}" I'm getting the whole role object, but it's not the case here