Vuetify 3 - Cannot Import Async Components

I know this isn't the best time to use vuetify 3 but, i did. Hoping everything goes well until i found out that a lot of components are still missing.

Now, I am having a problem importing a lazy component using defineAsyncComponent. my DOM doesn't seem to recognize async components. I don't know if it is a vuetify error but my project is made out of vuetify so I was suspecting it was the problem.

Below is my code in dashboardACtionsLayout.vue

<template>
  <div>
    <div class="d-flex mb-3 mt-2">
      <add-customer-modal />
    </div>
  </div>
</template>

<script setup>
import { defineAsyncComponent } from "vue";

components: {
  addCustomerModal: defineAsyncComponent(() =>
    import("@/components/customer/addCustomerModal.vue")
  );
}
</script>

<style lang="scss" scoped></style>

and this is the error i am getting in my console:

Use defineAsyncComponent like below.

<template>
  <div>
    <div class="d-flex mb-3 mt-2">
      <add-customer-modal />
    </div>
  </div>
</template>
<script setup>
import { defineAsyncComponent } from "vue";

const AddCustomerModal = defineAsyncComponent(() =>
  import('@/components/customer/addCustomerModal.vue')
)

</script>

<style lang="scss" scoped></style>

note:

The name of your component is addCustomerModal, while vue's recommendation is that the beginning of all words should be capitalized, like AddCustomerModal.