diff --git a/packages/core/src/__tests__/__snapshots__/vue.test.ts.snap b/packages/core/src/__tests__/__snapshots__/vue.test.ts.snap
index 5f9df51219..65e9634a63 100644
--- a/packages/core/src/__tests__/__snapshots__/vue.test.ts.snap
+++ b/packages/core/src/__tests__/__snapshots__/vue.test.ts.snap
@@ -261,7 +261,7 @@ import MyBooleanAttributeComponent from \\"./basic-boolean-attribute-component.r
 
 export default {
   name: \\"my-boolean-attribute\\",
-  components: { \\"my-boolean-attribute-component\\": MyBooleanAttributeComponent },
+  components: { MyBooleanAttributeComponent: MyBooleanAttributeComponent },
   props: [\\"type\\"],
 };
 </script>
@@ -288,8 +288,8 @@ import MyBasicOnMountUpdateComponent from \\"./basic-onMount-update.raw\\";
 export default {
   name: \\"my-basic-child-component\\",
   components: {
-    \\"my-basic-component\\": MyBasicComponent,
-    \\"my-basic-on-mount-update-component\\": MyBasicOnMountUpdateComponent,
+    MyBasicComponent: MyBasicComponent,
+    MyBasicOnMountUpdateComponent: MyBasicOnMountUpdateComponent,
   },
 
   data: () => ({ name: \\"Steve\\", dev: \\"PatrickJS\\" }),
@@ -816,8 +816,8 @@ import { get } from \\"@fake\\";
 export default {
   name: \\"form-component\\",
   components: {
-    \\"builder-block-component\\": BuilderBlockComponent,
-    \\"builder-blocks\\": BuilderBlocks,
+    BuilderBlockComponent: BuilderBlockComponent,
+    BuilderBlocks: BuilderBlocks,
   },
   props: [
     \\"previewState\\",
@@ -1402,7 +1402,7 @@ import ContentSlotCode from \\"./content-slot-jsx.raw\\";
 
 export default {
   name: \\"slot-code\\",
-  components: { \\"content-slot-code\\": ContentSlotCode },
+  components: { ContentSlotCode: ContentSlotCode },
 };
 </script>
 "
@@ -1420,7 +1420,7 @@ import ContentSlotCode from \\"./content-slot-jsx.raw\\";
 
 export default {
   name: \\"slot-code\\",
-  components: { \\"content-slot-code\\": ContentSlotCode },
+  components: { ContentSlotCode: ContentSlotCode },
 };
 </script>
 "
@@ -1946,7 +1946,7 @@ import RenderBlock from \\"./builder-render-block.raw\\";
 
 export default {
   name: \\"render-content\\",
-  components: { \\"render-block\\": RenderBlock },
+  components: { RenderBlock: RenderBlock },
   props: [\\"renderContentProps\\"],
 
   methods: {
@@ -2361,7 +2361,7 @@ import Foo from \\"./foo-sub-component.vue\\";
 
 export default {
   name: \\"sub-component\\",
-  components: { foo: Foo },
+  components: { Foo: Foo },
 };
 </script>
 "
@@ -2676,7 +2676,7 @@ import MyBooleanAttributeComponent from \\"./basic-boolean-attribute-component.r
 
 export default {
   name: \\"my-boolean-attribute\\",
-  components: { \\"my-boolean-attribute-component\\": MyBooleanAttributeComponent },
+  components: { MyBooleanAttributeComponent: MyBooleanAttributeComponent },
   props: [\\"type\\"],
 };
 </script>
@@ -2703,8 +2703,8 @@ import MyBasicOnMountUpdateComponent from \\"./basic-onMount-update.raw\\";
 export default {
   name: \\"my-basic-child-component\\",
   components: {
-    \\"my-basic-component\\": MyBasicComponent,
-    \\"my-basic-on-mount-update-component\\": MyBasicOnMountUpdateComponent,
+    MyBasicComponent: MyBasicComponent,
+    MyBasicOnMountUpdateComponent: MyBasicOnMountUpdateComponent,
   },
 
   data: () => ({ name: \\"Steve\\", dev: \\"PatrickJS\\" }),
@@ -3308,8 +3308,8 @@ import { get } from \\"@fake\\";
 export default {
   name: \\"form-component\\",
   components: {
-    \\"builder-block-component\\": BuilderBlockComponent,
-    \\"builder-blocks\\": BuilderBlocks,
+    BuilderBlockComponent: BuilderBlockComponent,
+    BuilderBlocks: BuilderBlocks,
   },
   props: [
     \\"previewState\\",
@@ -3972,7 +3972,7 @@ import ContentSlotCode from \\"./content-slot-jsx.raw\\";
 
 export default {
   name: \\"slot-code\\",
-  components: { \\"content-slot-code\\": ContentSlotCode },
+  components: { ContentSlotCode: ContentSlotCode },
 };
 </script>
 "
@@ -3994,7 +3994,7 @@ import ContentSlotCode from \\"./content-slot-jsx.raw\\";
 
 export default {
   name: \\"slot-code\\",
-  components: { \\"content-slot-code\\": ContentSlotCode },
+  components: { ContentSlotCode: ContentSlotCode },
 };
 </script>
 "
@@ -4605,7 +4605,7 @@ import RenderBlock, { RenderBlockProps } from \\"./builder-render-block.raw\\";
 
 export default {
   name: \\"render-content\\",
-  components: { \\"render-block\\": RenderBlock },
+  components: { RenderBlock: RenderBlock },
   props: [\\"renderContentProps\\"],
 
   methods: {
@@ -5080,7 +5080,7 @@ import Foo from \\"./foo-sub-component.vue\\";
 
 export default {
   name: \\"sub-component\\",
-  components: { foo: Foo },
+  components: { Foo: Foo },
 };
 </script>
 "
diff --git a/packages/core/src/generators/vue.ts b/packages/core/src/generators/vue.ts
index 5128abb5eb..e16fa106d7 100644
--- a/packages/core/src/generators/vue.ts
+++ b/packages/core/src/generators/vue.ts
@@ -9,7 +9,7 @@ import {
   getStateObjectStringFromComponent,
 } from '../helpers/get-state-object-string';
 import { mapRefs } from '../helpers/map-refs';
-import { renderPreComponent } from '../helpers/render-imports';
+import { checkIsComponentImport, renderPreComponent } from '../helpers/render-imports';
 import { stripStateAndPropsRefs } from '../helpers/strip-state-and-props-refs';
 import { getProps } from '../helpers/get-props';
 import { selfClosingTags } from '../parsers/jsx';
@@ -41,6 +41,7 @@ import { isSlotProperty, stripSlotPrefix, replaceSlotsInString } from '../helper
 import { PropsDefinition, DefaultProps } from 'vue/types/options';
 import { FUNCTION_HACK_PLUGIN } from './helpers/functions';
 import { babelTransformExpression } from '../helpers/babel-transform';
+import { checkIsDefined } from '../helpers/nullable';
 
 function encodeQuotes(string: string) {
   return string.replace(/"/g, '&quot;');
@@ -609,11 +610,10 @@ const mergeOptions = (
 const generateComponentImport =
   (options: ToVueOptions) =>
   (componentName: string): string => {
-    const key = kebabCase(componentName);
     if (options.vueVersion >= 3 && options.asyncComponentImports) {
-      return `'${key}': defineAsyncComponent(${componentName})`;
+      return `'${componentName}': defineAsyncComponent(${componentName})`;
     } else {
-      return `'${key}': ${componentName}`;
+      return `'${componentName}': ${componentName}`;
     }
   };
 
@@ -709,11 +709,19 @@ function generateOptionsApiScript(
   }
 
   // Component references to include in `component: { YourComponent, ... }
-  const componentsUsed = Array.from(getComponentsUsed(component))
+  const componentsUsedInTemplate = Array.from(getComponentsUsed(component))
     .filter((name) => name.length && !name.includes('.') && name[0].toUpperCase() === name[0])
     // Strip out components that compile away
     .filter((name) => !['For', 'Show', 'Fragment', 'Slot', component.name].includes(name));
 
+  // get default imports from component files
+  const importedComponents = component.imports
+    .filter(checkIsComponentImport)
+    .map((imp) => Object.entries(imp.imports).find(([_, value]) => value === 'default')?.[0])
+    .filter(checkIsDefined);
+
+  const componentsUsed = uniq([...componentsUsedInTemplate, ...importedComponents]);
+
   let propsDefinition: PropsDefinition<DefaultProps> = Array.from(props).filter(
     (prop) => prop !== 'children' && prop !== 'class',
   );
diff --git a/packages/core/src/helpers/render-imports.ts b/packages/core/src/helpers/render-imports.ts
index 1e6a1b58f6..aa04a33215 100644
--- a/packages/core/src/helpers/render-imports.ts
+++ b/packages/core/src/helpers/render-imports.ts
@@ -46,7 +46,7 @@ const getFileExtensionForTarget = (target: Target) => {
   }
 };
 
-const checkIsComponentImport = (theImport: MitosisImport) =>
+export const checkIsComponentImport = (theImport: MitosisImport) =>
   theImport.path.endsWith('.lite') && !theImport.path.endsWith('.context.lite');
 
 const transformImportPath = (theImport: MitosisImport, target: Target) => {