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>
      <button type="button" class="btn btn-primary float-right" v-if="model.permissions.includes('ADMIN')">Add group</button>
      <button type="button" class="btn btn-primary float-right" v-if="model.permissions.includes('ADMIN') || model.permissions.includes('MANAGE_MEMBERS')">Add collaborator</button>
    </div>
    <b-tabs content-class="mt-3">
      <GroupsPanel />
      <MembersPanel />
      </b-tab>
    </b-tabs>
  </div>
</template>

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

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

    },
    addMemeber: function() {

    }
  }
}
</script>