Closed
Description
Vue version
3.5.12
Link to minimal reproduction
Steps to reproduce
In the example, you can see a ref that is being passed via v-model to the child component.
The ref's type is string, while the child component's defineModel type is string | null.
The child then modifies the value of the parent's ref to null, which is invalid and should raise an error.
Parent:
<script setup lang="ts">
import { ref } from 'vue';
import Comp from './Comp.vue';
const foobar = ref<string>('hello world');
</script>
<template>
<Comp v-model="foobar" /> <!-- error should be thrown here -->
</template>Child:
<script setup lang="ts">
const model = defineModel<string | null>();
model.value = null; // this modifies parent's ref value to 'null', but foobar is of type 'string' only
</script>
<template />What is expected?
The value that is passed from parent to child via v-model directive, should have equal type to the one that's in the defineModel macro of the child component, otherwise a type error should be thrown.
What is actually happening?
The value passed to the v-model directive can be of any type that "extends" the defineModel type.
System Info
No response
Any additional comments?
This bug happens in cases, where the passed value is a type, that "extends" the defineModel type,
the following also doesn't error:
const foobar = ref<string>('hello world');
// foobar is assignable to this v-model type
const model = defineModel<string | null | undefined | boolean | object | number>();