Main.vue

<template>
  <div>
    <GroupsBreadcrumb />
    <div class="">
      <button type="button" class="btn btn-primary float-right" v-if="model.permissions.includes('ADMIN')">Add member</button>
      <b-button variant="primary" class="float-right" v-if="model.permissions.includes('ADMIN')" v-b-modal.new-group-modal>Add group</b-button>
      <button type="button" class="btn btn-primary float-right" v-if="model.permissions.includes('MANAGE_MEMBERS')">Add collaborator</button>
    </div>
    <b-tabs content-class="mt-3">
      <GroupsPanel />
      <MembersPanel />
    </b-tabs>
    <NewGroupModal />
  </div>
</template>

<script>
import GroupsBreadcrumb from './GroupsBreadcrumb.vue'
import GroupsPanel from './GroupsPanel.vue'
import MembersPanel from './MembersPanel.vue'
import NewGroupModal from './modals/NewGroupModal.vue'
import { mapState } from 'vuex';

export default {
  name: 'Main',
  components: {
    GroupsBreadcrumb,
    GroupsPanel,
    MembersPanel,
    NewGroupModal
  },
  computed: mapState({
    model: state => state.model
  }),
  methods: {
    addMember: function() {

    }
  }
}
</script>