Using v-model with @vue/compat and configureCompat in Composition API

[d9beuD]

I have a working Vue 3 application, it is configured with @vue/compat.

I want to create a component with a v-model so a modelValue props must be defined in the component as well as a computed property with getter and setter.

const props = defineProps<{ modelValue: string }>();

const content = computed({
  get: () => props.modelValue,
  set: (value) => emit("update:modelValue", value),
});

Defined as above, it won't work because @vue/compat expect the model value name to be value instead of modelValue. @vue/compat also seems to expect an input event instead of update:value. So I updated my component like the following:

const props = defineProps<{ value: string }>();

const content = computed({
  get: () => props.value,
  set: (value) => emit("input", value),
});

But now, TypeScript shout an error from the parent component (in which we want to pass a v-model to the child component) because to use a v-model on my child component, it must define a modelValue! This said, it somehow works in dev runtime.

The solution I'm thinking about is to disable @vue/compat COMPONENT_V_MODEL flag in the parent component.

As said in the migration guide, we can configure this like so:

export default {
  compatConfig: {
    MODE: 2,
    COMPONENT_V_MODEL: false,
  }
  // ...
}

But I'm using the Composition API with TypeScript and there is no configureCompat member to import in my setup. So here is my question: How can I configure my component compatibility?

Maybe I'm doing something wrong, any help is welcome. Thank you all.

[warmthsea]

https://vue-macros.sxzz.moe/macros/define-model.html
https://vueuse.org/core/useVModels/#usevmodels
You can operate the data in props in this way

[LinusBorg]

But I'm using the Composition API with TypeScript and there is no configureCompat member to import in my setup. So here is my question:
How can I configure my component compatibility?

By using a second script block.

<script>
export default {
  compatConfig: {
    MODE: 2,
    COMPONENT_V_MODEL: false,
  }
}
</script>
<script setup>
const props = defineProps<{ modelValue: string }>();

const content = computed({
  get: () => props.modelValue,
  set: (value) => emit("update:modelValue", value),
});
</script>

``