In a Vue project, I have a composable that provides few useful refs to components using it.

In my application, it is very likely that whichever components use the composable, it will need to render another component. Therefore, I think it would be very convenient to provide component from the composable itself, like:

export function useMyComposable() {
  const MyComponent = defineAsyncComponent(() => import('components/MyComponent.vue'));

  return { MyComponent }
}

Which works like a charm in parent:

<template>
  <my-component />
</template>

<script setup>
import { useMyComposable } from 'composables/myComposable';
const { MyComponent } = useMyComposable();
</script>

However, one of the v-on directives of my component shall be always fixed when using the composable. I’d like something like:

export function useMyComposable() {
  function submit() { /* whatever */ }

  const MyComponent = defineAsyncComponent(
    () => import('components/MyComponent.vue'),
    { onSubmit: submit }, // <-- how to do this?
  );

  return { MyComponent }
}

I tried so far few paths:

// in composable
// Use Vue's "h", with MyComponent being either the component itself or a function
// This renders, but not working as expected
const MyComponent = () => h(
  defineAsyncComponent(() => import('components/MyComponent.vue'),
  { onSubmit: submit },
);

// in composable
// Tried with "withDefaults"
const MyComponent = withDefaults(
  defineAsyncComponent(() => import('components/MyComponent.vue'),
  { onSubmit: submit },
);

<template>
  <!-- in component -->
  <component :is="MyComponent()" />
</template>

Is there any way to achieve it? Possibly with both props and on methods.