useModalSlot and useModal typings don't allow reactive values in attrs, but it looks like they work?

[Anoesj]

Version

vue-final-modal: v4.5.5
vue: v3.5.13
nuxt: v3.15.4

Example

import { ModalConfirm } from '#components';

/*
  Normally this would be exported from e.g. /components/Modal/Confirm/modalConfirmProps.ts
  and used in /components/Modal/Confirm/ModalConfirm.vue
*/
export type ModalConfirmProps = {
  title?: string;
};

const title = ref('I am a title');

const {
  open,
  close,
} = useModal({
  component: ModalConfirm,
  attrs: {
    title, // ❌ TS error: Type 'Ref<string, string>' is not assignable to type 'string'.
    title: title as unknown as ModalConfirmProps['title'], // ✅ no errors,
  },
});

open();
setTimeout(() => title.value = 'I changed', 3000); // the modal's title will actually update properly!

Note

Example simplified for brevity. Real life use case would be e.g. a useConfirmModal composable where title is typed as MaybeRef<string>.

(btw: forking https://codesandbox.io/s/nuxtcontent-demo-l164h is not possible, it doesn't exist?)

What is Expected?

It would be better if the typings reflect the actual values you can pass in attrs. Fixing this will make users more aware of the possibilities when using vue-final-modal, because it's super duper flexible and it's a shame if people don't make use of it, because they think they can't.

[bblanchon]

I came here to report the exact same issue.
TypeScript reports an error but the code works as expected.