Type Error with `attrs` parameter when passing `Ref` object to `useModal` in Vue component

[Rock070]

Version

vue-final-modal: 4.4.5 vue: 3.3.4

OS

Mac

Reproduction Link

https://stackblitz.com/edit/github-p51t7c?file=src%2Fcomponents%2FMyModalPreview.vue

Steps to reproduce

npx vue-tsc

What is Expected?

expect type check pass

What is actually happening?

type check fail as follows

src/components/MyModalPreview.vue:12:5 - error TS2322: Type 'Ref<string>' is not assignable to type 'string'.

12     title,

Description

Hi there,

I encountered an issue while using the useModal function in Vue when passing a Ref object as props using the attrs parameter. The TypeScript check with npx vue-tsc throws an error as follows:

src/components/MyModalPreview.vue:12:5 - error TS2322: Type 'Ref<string>' is not assignable to type 'string'.

12     title,

Here's the relevant code:

myModal.ts

defineProps<{
  title?: string;
}>();

myModalPreview.ts

import { ref } from 'vue';

const title = ref('Hello World');

const { open } = useModal({
  component: MyModal,
  attrs: {
    title,
  },
  slots: {
    default: '<p>The content of the modal</p>',
  },
});

I noticed that if I use reactive to wrap the attrs object, the error no longer occurs:

const title = ref('Hello World');
const attrs = reactive({ title: title });

const { open } = useModal({
  component: MyModal,
  attrs,
  slots: {
    default: '<p>The content of the modal</p>',
  },
});

I'm not sure if this is a bug or intended behavior. I would appreciate some clarification on why this happens and whether my workaround is the correct approach.

Thanks!

[hunterliu1003]

I think that we've discussed this before. Currently the only way would be:

const props = defineProps<{
  title?: Ref<string> | string
}>()

or using patchOptions, for example:

const { patchOptions } = useModal({
  component: ...,
  attrs: {
    title: 'first'
  }
})

patchOptions({
  attrs: {
    title: 'changed title'
  }
})