具有.vue文件的Ag Grid Vue主详细信息组件

Question

我引用了这个示例来编写表单组件以了解主要细节：https://www.ag-grid.com/javascript-grid-master-detail/#example-custom-detail-cell-renderer-with-a-form

但是，该示例使用.js文件作为组件。我的问题是，如何在普通的单个文件组件（即DetailCellRenderer文件）中编写.vue组件。

我目前的解决方法是导出Vue.extend（）返回的init函数：

<template>
...
</template>

<script>
import Vue from 'vue'

export default Vue.extend({
  data () {
    return {
      data: null
    }
  },
  methods: {
    onSubmit (e) {
      e.preventDefault()
    }
  }
})
</script>

<style>
...
</style>

有更好的方法吗？

谢谢！