fix(runtime-dom): "el._assign is not a function" in compat mode

[jaulz]

In compat mode el._assign is not a function is thrown when you bind a model to a radio button because onUpdate:modelValue does not exist in the props. As far as I could see in compat mode it's called onModelCompat:input instead:
https://github.com/vuejs/vue-next/blob/4f17be7b1ce4872ded085a36b95c1897d8c1f299/packages/runtime-core/src/compat/componentVModel.ts#L38-L40

I created a reproducible repository here:
https://github.com/jaulz/vue-repro

[yyx990803]

Hmm, the logic is guarded to be only applied to component vnodes: https://github.com/vuejs/vue-next/blob/4f17be7b1ce4872ded085a36b95c1897d8c1f299/packages/runtime-core/src/compat/componentVModel.ts#L18

I'd love to see a reproduction to make sure we find the right fix.

[jaulz]

@yyx990803 thanks for your response! In order to reproduce it you can clone https://github.com/jaulz/vue-repro and run it via yarn serve. Just click any of the options at the top.

[posva]

@jaulz Your reproduction is way too large, can you boil it down to only Vue and no external libs so we can take a look? (https://new-issue.vuejs.org/?repo=vuejs/vue-next#why-repro)

[xanf]

@yyx990803 @posva

While working on migration of bootstrap-vue to @vue/compat I believe I was able to extract minimal possible example:

import Vue from "@vue/compat";

const App = {
  compatConfig: {
    MODE: 3,
    COMPONENT_V_MODEL: true,
    RENDER_FUNCTION: true
  },
  render(h) {
    return h("input", {
      on: {
        input() {
          console.log("invoked");
        }
      },
      // This comment was in original code (bootstrap-vue):
      // Directive needed to   get `event.target.composing` set (if needed)
      directives: [{ name: "model", value: "foo" }]
    });
  }
};

Vue.createApp(App).mount("#app");

CodeSandbox

According to v2 docs - usage of v-model directive from render function was never promoted, but it will be cool to have this fixed for better compat-build compatibility

[netlify]

❌ Deploy Preview for vuejs-coverage failed.

Name	Link
🔨 Latest commit	ad48bd0
🔍 Latest deploy log	https://app.netlify.com/sites/vuejs-coverage/deploys/6279c66e4382f30008615857

[netlify]

❌ Deploy Preview for vue-next-template-explorer failed.

Name	Link
🔨 Latest commit	ad48bd0
🔍 Latest deploy log	https://app.netlify.com/sites/vue-next-template-explorer/deploys/6279c66e3bed4a0008f6694d

[netlify]

❌ Deploy Preview for vue-sfc-playground failed.

Name	Link
🔨 Latest commit	ad48bd0
🔍 Latest deploy log	https://app.netlify.com/sites/vue-sfc-playground/deploys/6279c66e6a76100008f87218