how to bind ref value in tsx?

[coader]

it's ok when use in template

const x=ref(0)
<comp :value="x"/>

but when use in tsx:
const comp=<Comp value={x} />

it run ok but show error with: ts2322
"Type 'Ref' is not assignable to type 'number'."

if I use value={x.value}, it lost reactive

[chenxch]

<comp modelValue={x.value} onUpdate:modelValue={(val: number) => (x.value = val)} />

[coader]

it's not a model value, only props but need update when running, it's ok when use it in template

[chenxch]

Can you provide a demo?

[chenxch]

demo
Normal use is fine, since there is no demo, I can't know what caused the lost reactive.

[coader]

sfc playground can't use tsx, so it's hard to provide demo, I am only know how to write sfc
I render JSX.Element to htmlelement with current appcontext, is it cause problem?

const comp = <Comp value={x.value}/>
comp.appContext = context
render(comp, element)

[chenxch]

demo
This is a relatively rare usage. Volar uses the conventional tsx method to verify and prompt the type. This feedback to volar seems to be difficult to solve. I can only use non-compliant methods to bypass the verification. I also want to know this How to solve this situation correctly.

[coader]

thanks, pass ref to props should be ok, but it show error in volar, hope the perfect solution, now I have to convert type also

[coader]

but it still show warning in console:
runtime-core.esm-bundler.js:40 [Vue warn]: Invalid prop: type check failed for prop "visible". Expected Boolean, got Object

[chenxch]

Is it considered to change another writing method to implement it?

[coader]

also it's failed when I use watch in component to detect props change:

watch(()=>props.x, value=>{
})

can't fired when I change x.value in parent