JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://unpkg.com/vue@2.0.3/dist/vue.js"></script>
<script src="https://unpkg.com/lodash@4.16.0"></script>
<div id="checked">
  <div class="roles">
    <div v-for="role in roles">
    <a class="role" v-on:click="update(role)">Select <b>{{role.name}}</b></a>
    </div>
  </div>
  
  <div class="permissions">
    <div v-for="perm in permissions" class="permission">
      <input type="checkbox" 
             v-bind:id="perm.id" 
             v-bind:value="perm.name"
             v-model="currentPerms"> {{ perm.name }}
    </div>
  </div>
</div>

SCSS

.roles {
  width: 250px;
  float: left;
  .role {
    display: block;
    padding: 5px 10px;
    margin-bottom: 2px;
    background: white;
    border-radius: 3px;
  }
}

.permissions {
  width: 200px;
  float: left;
  .permission {
    padding: 5px;
  }
}

JavaScript

new Vue({
  el: '#checked',
  data: {
  	currentPerms: [],
    currentRole: null,
		roles: [
      {
      	id: 1, 
        name: 'Admin', 
        perms: [
        	{ id: 1, name: 'edit_thing' },
          { id: 2, name: 'edit_otherthing' }
        ]
      },
      
      {
      	id: 1,
        name: 'Basic Admin',
        perms: [
        	{ id: 3, name: 'edit_other_thing' }
        ]
      }
    ],
    
    permissions: [
    	{ id: 1, name: 'edit_thing' },
      { id: 2, name: 'edit_otherthing' },
      { id: 3, name: 'edit_other_thing' }
    ]
  },
  
  methods: {
    update: function(role) {
    	this.currentRole = role;
      this.currentPerms = _.map(role.perms, function(permission) {
      	return permission.name;
      });
    }
  }
})