Collapsible.js

const Collapsible = (refName = 'contentWrapper') => ({
  data: () => ({
    hideContents: false,
    contentObs: null,
    contentHeight: 0,
  }),

  mounted () {
    this.$nextTick(() => {
      const el = this.$refs[refName].childNodes[0]

      this.contentObs = new ResizeObserver(ev => {
        const rect = ev[0].target.getBoundingClientRect()
        this.contentHeight = rect.height
      })

      this.contentObs.observe(el)
    })
  },

  beforeDestroy () {
    this.contentObs.disconnect()
  }
})

export default Collapsible