This is my CollapseCustomComponent.vue

app.js

// The Vue build version to load with the `import` command
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
import Vue from 'vue'
import * as firebase from 'firebase'
import router from './router'
import store from './store'
import { sync } from 'vuex-router-sync'
import NProgress from 'vue-nprogress'
import App from './App'
import VeeValidate from 'vee-validate'

// Enable devtools
Vue.config.devtools = true

// Sync routes
sync(store, router)

Vue.use(NProgress)
const nprogress = new NProgress({ parent: '.nprogress-container' })

Vue.use(VeeValidate)

// Initialize Firebase
var config = {
  apiKey: process.env.FIREBASE_API_KEY,
  authDomain: process.env.FIREBASE_AUTH_DOMAIN,
  databaseURL: process.env.FIREBASE_DATABASE_URL,
  storageBucket: process.env.FIREBASE_STORAGE_BUCKET,
  messagingSenderId: process.env.FIREBASE_MESSAGING_SENDER_ID
}
const firebaseApp = firebase.initializeApp(config)

const app = new Vue({
  router,
  store,
  nprogress,
  ...App
})

export { app, router, store, firebaseApp }

App.vue

<template>
  <div class="app">
    <nprogress-container></nprogress-container>
    <transition name="fade" mode="out-in">
      <template v-if="loading">
        <ryft-spinner></ryft-spinner>
      </template>
      <template v-else>
        <router-view class="animated" ></router-view>
      </template>
    </transition>
  </div>
</template>

<script>
import NprogressContainer from 'vue-nprogress/src/NprogressContainer'
import VuexFirebase from 'core/firebase/VuexFirebase'
import profiles from 'core/firebase/mixins/profiles'
import RyftSpinner from 'views/RyftSpinner'
import { firebaseApp } from 'app'

export default {
  name: 'ryft-app',

  data () {
    return {
      user: null,
      loading: true
    }
  },

  components: {
    RyftSpinner,
    NprogressContainer
  },

  mixins: [profiles],

  created () {
    firebaseApp.auth().onAuthStateChanged((user) => {
      if (user) {
        this.showNextView(user)
      } else {
        this.loading = false
        this.$router.push({name: 'Login'})
      }
    })
  },

  methods: {
    initializeStore () {
      let vuexFirebase = new VuexFirebase(firebaseApp, this.$store)
      vuexFirebase.listenDatabase('ryfts')
        .mapActions([
          { event: 'child_added', action: 'addItem' },
          { event: 'child_changed', action: 'updateItem' },
          { event: 'child_removed', action: 'deleteItem' }
        ],
        {
          namespaced: true
        }
      )
      vuexFirebase.listenDatabase('games')
        .mapActions([
          { event: 'child_added', action: 'addItem' },
          { event: 'child_changed', action: 'updateItem' },
          { event: 'child_removed', action: 'deleteItem' }
        ],
        {
          namespaced: true
        }
      )
    },

    showNextView (user) {
      this.getRole(user, role => {
        this.loading = false

        if (role.val() === 'admin') {
          this.initializeStore()
          this.$router.replace(this.$route.query.redirect || '/dashboard')
        } else {
          this.$router.push({name: 'Login'})
        }
      })
    }
  }
}
</script>

<style lang="scss">
@import '~bulma/sass/utilities/initial-variables';
$blue_ryft: #00b4d0;
$primary: $blue_ryft;
@import '~bulma';

$fa-font-path: '~font-awesome/fonts/';
@import '~font-awesome/scss/font-awesome';

@import '~animate.css';
</style>

<style>
#app {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

html {
  background: #f5f5f5;
}

.animated {
  animation-duration: .377s;
}

/* Enter and leave animations can use different */
/* durations and timing functions.              */
.fade-enter-active {
  transition: all .3s ease;
}
.fade-leave-active {
  transition: all .8s cubic-bezier(1.0, 0.5, 0.8, 1.0);
}
.fade-enter, .fade-leave-to
/* .slide-fade-leave-active for <2.1.8 */ {
  transform: translateX(10px);
  opacity: 0;
}
</style>

<style>
.nprogress-container {
  position: fixed !important;
  width: 100%;
  height: 50px;
  z-index: 2048;
  pointer-events: none;

  #nprogress {
    $color: #48e79a;

    .bar {
      background: $color;
    }
    .peg {
      box-shadow: 0 0 10px $color, 0 0 5px $color;
    }

    .spinner-icon {
      border-top-color: $color;
      border-left-color: $color;
    }
  }
}
</style>

CollapseCustomComponent.vue

<template lang="html">
  <div>
    <div class="block is-flex">
      <collapse>
        <collapse-item title="Components" class="item">
          Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus nec iaculis mauris. @bulmaio. #css #responsive
        </collapse-item>
        <collapse-item title="Elements" class="item">
          Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus nec iaculis mauris. @bulmaio. #css #responsive
        </collapse-item>
        <collapse-item title="Nests">
          <collapse>
            <collapse-item title="Nest Child" class="item">
              Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus nec iaculis mauris. @bulmaio. #css #responsive
            </collapse-item>
          </collapse>
        </collapse-item>
      </collapse>
    </div>
  </div>
</template>

<script>
import { Collapse, Item as CollapseItem } from 'vue-bulma-collapse'

export default {
  name: 'probability-settings',

  components: {
    Collapse,
    CollapseItem
  }
}
</script>

<style lang="scss" scoped>
.collapse {
  display: block;
}
</style>