Rollup.js - 嵌套组件未呈现

Question

我想用 Form 组件创建包。表单组件有TextInput、CtaButton等子组件。我的编译工具是rollup.js。

这里是配置：

import vue from 'rollup-plugin-vue'; // Handle .vue SFC files
import typescript from 'rollup-plugin-typescript'
import css from "rollup-plugin-css-only";

export default {
  input: './src/components/Form.vue', // Path relative to package.json
  output: {
    file: "lib/Form.js"
  }

  external: ["@vue/composition-api", "vue", "vee-validate"],
  plugins: [
    css(),
    vue({
      css: false,
      compileTemplate: true,
    }),

    typescript({
      tsconfig: "./tsconfig.json",
      module: "es2015"
    })
  ]
};

表单组件：

<template>
  <div>
    <span>Hello from component</span>
    <cta-button label="Test"  />
  </div>
</template>

<script lang="ts">
import {defineComponent} from "vue";
import CtaButton from "./CtaButton.vue"; 

export default defineComponent({
  components: {
     CtaButton
  }
})
</script>

Cta 按钮

<template>
  <button
      :type="type"
      @click="clickHandle"
      :class="`bg-primary text-white font-bold py-2 px-4 rounded`">
    {{ label }}
  </button>
</template>

<script lang="ts">

import {defineComponent} from "vue";

export default defineComponent({
  name: 'cta-button',
  props: {
    label: {
      type: String,
      required: true
    },
    
    type: {
      type: String
    }
  },

  setup(props, {emit}) {

    const clickHandle = () => {
      emit("click")
    }

    return {
      clickHandle
    }
  }
});
</script>

主应用：

<template>
  <div>
    <Form />
  </div>
</template>

<script lang="ts">
import {defineComponent} from "vue";

import Form from "my-package/lib/Form";

export default defineComponent({
  name: "MainComponent",
  components: {
    Form
  }
});
</script>

在主应用程序中，Form 组件看起来不错，但 CtaButton 尚未呈现。清除 html 标签有效，但组件无效。

我尝试在单独的包中将 CtaButton 作为根组件调用，并且它可以工作。问题仅在于子组件。

我该如何解决？感谢您抽出宝贵时间。