[Vuejs]-VueJs 2: map selected child checkboxes with the parent

This should work

<template>
<div>
    <div id="app">
        <div v-for="role in roles" class="role-row">
            <label>{{role.role_name}}</label>
            <hr>
            <div v-for="(perm,index) in role.perms">
                <input type="checkbox" @change="getRole(role,index)" :value="perm"  v-model="checked_roles"> {{ perm.perm_name }}
            </div>
        </div>

        <p>Selected roles and perms</p>
        {{checked_roles}}
    </div>
</div>

 data: {
        checked_roles: [],
        checked_roles_with_role_name: [],
        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'
                    }
                ]
            }
        ]
    },
    methods:{
        getRole(role,index){
            this.checked_roles_with_role_name={checked_roles:this.checked_roles,role_name:role.role_name}
        }
    }

SO “checked_roles_with_role_name” data property should hold selected role and their role names

Best technique for syncing object from child to direct parent is to use .sync modifier. More info here.