[vue3.x] initial value not honored in @vue/compat mode

[fgarit-te]

Tried to reproduce this in a codesandbox but I think they don't run the vue.config.js.

Steps to reproduce:

• create a new vue project: vue create hello-world
• pick "Default (Vue 3) ([Vue 3] babel, eslint)".
• cd hello-world
• npm i -s @vue/compat vue-slider-component@beta
• add a vue.config.js file at the root of the project with:

module.exports = {
    chainWebpack(config) {
        // https://www.vuemastery.com/blog/vue-3-migration-build/
        config.resolve.alias.set('vue', '@vue/compat');
        config.module
            .rule('vue')
            .use('vue-loader')
            .tap(options => {
                return {
                    ...options,
                    compilerOptions: {
                        compatConfig: {
                            MODE: 2
                        },
                    },
                };
            });
        
        return config;
    },
};

• replace the contents of the preexisting file "src/components/HelloWorld.vue" with

<template>
  <div style="width: 500px">
    <VueSlider v-model="myValue" />
  </div>
</template>
<script>
import VueSlider from 'vue-slider-component';
import "vue-slider-component/theme/antd.css";

export default {
  components: {
    VueSlider,
  },
  data() {
    return {
      myValue: [4, 50],
      // myValue: 50,
    };
  },
};
</script>

• npm run serve

Expected behavior

2 knobs at 4/100 and 50/100
or
1 knob at 50/100 if using myValue: 50,

Actual result

1 knob at position 0

Config

As of today, if I npm list, I get

├── @vue/cli-plugin-babel@4.5.15
├── @vue/cli-plugin-eslint@4.5.15
├── @vue/cli-service@4.5.15
├── @vue/compat@3.2.22
├── @vue/compiler-sfc@3.2.22
├── babel-eslint@10.1.0
├── core-js@3.19.1
├── eslint-plugin-vue@7.20.0
├── eslint@6.8.0
├── vue-slider-component@4.0.0-beta.5
└── vue@3.2.22

Edit: when running in compat mode, we get a bunch of compat warnings, including:

[Yc-Chen]

It probably should not be solved in this repo. but this works:

<VueSlider :model-value="myValue" @change="e => myValue = e"/>

[NightCatSama]

The v-model in vue2 uses value, while vue3 uses model-value.