Collapsible.js

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

  mounted () {
    this.$nextTick(() => {
      if (!this.$refs[refName]) return

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

      const el = this.$refs[refName].hasOwnProperty('$el')
        ? this.$refs[refName].el
        : this.$refs[refName]

      if (el) this.contentObs.observe(el.childNodes[0])
    })
  },

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

export default Collapsible