Main.vue

<template>
  <div>
    <GroupsBreadcrumb v-bind:values="model.breadcrumbs" />
    <div class="">
      <button type="button" class="btn btn-primary float-right" v-if="model.permission === 'ADMIN'">Add member</button>
      <button type="button" class="btn btn-primary float-right" v-if="model.permission === 'ADMIN'">Add group</button>
      <button type="button" class="btn btn-primary float-right" v-if="model.permission === 'PI'">Add collaborator</button>
    </div>
    <b-tabs content-class="mt-3">
      <GroupsPanel v-bind:model="model" />
      <MembersPanel v-bind:model="model" />
      </b-tab>
    </b-tabs>
  </div>
</template>

<script>
import GroupsBreadcrumb from './GroupsBreadcrumb.vue'
import GroupsPanel from './GroupsPanel.vue'
import MembersPanel from './MembersPanel.vue'

export default {
  name: 'Main',
  components: {
    GroupsBreadcrumb,
    GroupsPanel,
    MembersPanel
  },
  props: {
    model: Object
  },
  methods: {
    addGroup: function() {

    },
    addMemeber: function() {

    }
  }
}
</script>