Vue递归组件问题

运行代码如下:

<template>
  <div>
    <Button @click="test">测试</Button>
    <component :is="name"/>
  </div>
</template>
<script lang="ts">
import { Component, Vue } from "vue-property-decorator";

@Component
export default class DataTable extends Vue {
  private name: string | null = null;

  private test() {
    this.name = "data-table";
  }
}
</script>

需要达到的效果是点击按钮会加载组件自身,以此类推,代码在npm run serve状态下没有问题,效果如图:
image
但是使用npm run build后,点击按钮没有任何反应。此外,这个代码是用ts写的,改写成js运行没有问题。个人认为是组件名称在ts格式下的问题,但是不知道如何操作,还请大神帮帮忙!!!

自问自答,在ts格式下,应该在@Component({name: “data-table”})中命名组件名称,才能正常实现递归效果。