Vue.js: defineAsyncComponent Renders [Object object] When Loading a UMD Component

I'm trying to dynamically load a built UMD Vue component into a separate Vue app using defineAsyncComponent, but instead of rendering the component, it displays [Object object]. The async file is loaded to the DOM and the console indicates a fulfilled Promise, yet no errors are thrown. I have tried various arrow functions and import formats (see https://vuejs.org/guide/components/async), but every attempt returns [Object object].

Below are my code snippets and configuration:

JAVASCRIPTCopied
const AsyncFwdSearchCardTop = defineAsyncComponent({
    loader: async () => {
            console.log('Loading component...');
            const module = import(/* @vite-ignore */ './dist/bwys-card-before.umd.js');
            console.log(module);
            return module;
    },
    loadingComponent: () => Loading,
    errorComponent: () => ErrorComponent,
});

Component File:

VUECopied
<template>
    <p>This is an async-loaded component.</p>
</template>

<script>
export default {
    name: "AsyncFwdSearchCardTop",
};
</script>

UMD Build:

JAVASCRIPTCopied
(function (e, n) {
  typeof exports == "object" && typeof module < "u"
    ? (module.exports = n(require("vue")))
    : typeof define == "function" && define.amd
    ? define(["vue"], n)
    : ((e = typeof globalThis < "u" ? globalThis : e || self),
      (e.AsyncFwdSearchCardTop = n(e.Vue)));
})(this, function (e) {
  "use strict";
  const n = (o, c) => {
      const t = o.__vccOpts || o;
      for (const [r, s] of c) t[r] = s;
      return t;
    },
    d = { name: "AsyncFwdSearchCardTop" };
  function p(o, c, t, r, s, a) {
    return (
      e.openBlock(),
      e.createElementBlock("p", null, "This is an async-loaded component.")
    );
  }
  return n(d, [["render", p]]);
});

Vite Configuration:

JAVASCRIPTCopied
import { defineConfig } from 'vite';
import vue from '@vitejs/plugin-vue';

export default defineConfig({
  plugins: [vue()],
  publicDir: false,
  build: {
    outDir: 'dist',
    lib: {
      entry: './src/AsyncFwdSearchCardTop.vue',
      name: 'AsyncFwdSearchCardTop',
      fileName: (format) => `bwys-card-before.${format}.js`,
      formats: ['es', 'umd'],
    },
    rollupOptions: {
      external: ['vue'],
      output: {
        globals: {
          vue: 'Vue',
        },
      },
    },
  },
});

I appreciate any insights or troubleshooting strategies to resolve this rendering issue. Thanks!