consider about Ref as props when using mount api

[Jokcy]

I found VTU use this code to make reactive of props when mount:

const props = reactive({
    ...options?.attrs,
    ...options?.props,
    ref: MOUNT_COMPONENT_REF
  })

but if I have const someRef = ref({}) and pass it to mount:

mount(App, {
  props: {
    someRef: someRef
  }
})

it will break the Ref structure

[lmiller1990]

What happens if you attempt to put a ref inside reactive in VTU at the moment? Something weird?

Btw, what is your real-world use case (assuming there is one) for passing a ref as a prop? I am guessing this is supported in Vue 3.x (never thought about it).

I do believe we need props to be reactive for the setProps function.

[Jokcy]

I'm not sure if my case will be a common case. Since I write my components using composition api

<Child ref="child">

this.$refs.child.doSomething()

this code not work anymore because I did not put the doSomething method on vm. So I figure out and try to use:

const contextRef = ref({})
<Child contextRef={contextRef}>

// in child
contextRef.value = {
  doSomething() {}
}

and it worked.

This breaks when using mount(App, { props: { contextRef } }), I did not find the reason by now and I am also not sure whether this need to be fixed.

[lmiller1990]

I think passing a template ref is actually going to be a use-case people. I wonder if we can use isRef to check for a ref then use markRaw or something like that to opt-out.

I will think about this a bit more and try some things out, lmk if you come up with anything 👍