Javascript vue渲染功能无法正常工作

我从element.eleme.io中提取了折叠转换表单进行测试。 但是，代码并没有按预期工作。已调用render函数，但未使用类转换提供的方法。 尝试用谷歌搜索如何正确使用渲染函数，但没有太多关于它的信息。有人知道如何解决这个问题吗

collapse-travision.js

App.vue

项目1
项目2
项目3
项目4
项目5

显示
从“/utils/collapseTransformation”导入CollapseTransformation
导出默认值{
组成部分：{
塌陷转换
},
数据（）{
返回{
秀：真的
}
}
}
.崩塌过渡{
过渡：0.3s高度缓进缓出，0.3s填充顶部缓进缓出，0.3s填充底部缓进缓出；
}

属性上的

要求的是普通对象，而不是类实例。准确地说，Vue使用
表示。。在
中循环该对象的属性，而这对类方法不起作用

为什么要在这里使用类？
老实说，js文件是直接从元素中提取的。不太清楚他们的源代码为什么会这样做。但如果我在项目中直接使用元素，它就可以正常工作。
class Transition {
  beforeEnter (el) {
    el.classList.add('collapse-transition')
    if (!el.dataset) el.dataset = {}

    el.dataset.oldPaddingTop = el.style.paddingTop
    el.dataset.oldPaddingBottom = el.style.paddingBottom

    el.style.height = '0'
    el.style.paddingTop = 0
    el.style.paddingBottom = 0
  }

  enter (el) {
    el.dataset.oldOverflow = el.style.overflow
    if (el.scrollHeight !== 0) {
      el.style.height = el.scrollHeight + 'px'
      el.style.paddingTop = el.dataset.oldPaddingTop
      el.style.paddingBottom = el.dataset.oldPaddingBottom
    } else {
      el.style.height = ''
      el.style.paddingTop = el.dataset.oldPaddingTop
      el.style.paddingBottom = el.dataset.oldPaddingBottom
    }

    el.style.overflow = 'hidden'
  }

  afterEnter (el) {
    el.classList.remove('collapse-transition')
    el.style.height = ''
    el.style.overflow = el.dataset.oldOverflow
  }

  beforeLeave (el) {
    if (!el.dataset) el.dataset = {}
    el.dataset.oldPaddingTop = el.style.paddingTop
    el.dataset.oldPaddingBottom = el.style.paddingBottom
    el.dataset.oldOverflow = el.style.overflow

    el.style.height = el.scrollHeight + 'px'
    el.style.overflow = 'hidden'
  }

  leave (el) {
    if (el.scrollHeight !== 0) {
      el.classList.add('collapse-transition')
      el.style.height = 0
      el.style.paddingTop = 0
      el.style.paddingBottom = 0
    }
  }

  afterLeave (el) {
    el.classList.remove('collapse-transition')
    el.style.height = ''
    el.style.overflow = el.dataset.oldOverflow
    el.style.paddingTop = el.dataset.oldPaddingTop
    el.style.paddingBottom = el.dataset.oldPaddingBottom
  }
}

export default {
  name: 'MyCollapseTransition',
  functional: true,
  render (h, { children }) {
    const data = {
      on: new Transition()
    }

    return h('transition', data, children)
  }
}

<template>
  <div id="app">
    <collapse-transition>
      <div v-show="show">
        <ul>
          <li>Item 1</li>
          <li>Item 2</li>
          <li>Item 3</li>
          <li>Item 4</li>
          <li>Item 5</li>
        </ul>
      </div>
    </collapse-transition>
    <button @click="show = !show">Show</button>
  </div>
</template>

<script>
import CollapseTransition from './utils/collapse-transition'

export default {
  components: {
    CollapseTransition
  },
  data () {
    return {
      show: true
    }
  }
}
</script>

<style>
.collapse-transition {
  transition: 0.3s height ease-in-out, 0.3s padding-top ease-in-out, 0.3s padding-bottom ease-in-out;
}
</style>