Version

3.2.16

Reproduction link

sfc.vuejs.org/

Steps to reproduce

Create a component tag with is as input and use computed getter and setter as the v-model value, something like this:

<component :is="'input'" type="text" v-model="emitValue" />

and have the computed as:

const text = ref('')

const emitVal = computed({
  get:()=> text.value,
  set(val) {
    text.value = val
  }
})

What is expected?

The computed to be reactive

What is actually happening?

Neither the getter nor the setter seems to be reactive or responding

If you look at the generated JS tab, you can see that for the dynamic component, Vue generates code that fits for a component that v-model is used on, not an input element.

The compile can't verify at build time which type the dynamic component will be at runtime, and as the "usual" usecase is to actually render different dynamic components, it creates render code suitable to that.

As a workaround you could a) not use v-model and use the normal input event & value binding instead b) wrap the input in a small component.

I don't see how we could solve this in the compiler as the type of "component" is determined at runtime.

Hi, I recently had a problem with this and it took a while to hunt an answer down as to why this is happening.

Do you think a very brief comment in the docs is justified here?

I'm happy to open a PR with this sort of comment added if @LinusBorg is open to that.

I would probably put it right here in the Dynamic Components section

Sure, makes sense to me.

Nice, I'll put something together, thanks!

Just opened PR 👍🏼 https://github.com/vuejs/docs/pull/1783