Vetur to Volar => undefined problem in modelValue

Hello, when I changed Vetur to Volar, all my q-input, q-select… generates these errors :

Cannot assign type 'string | undefined 'to type' string | number'.
Cannot assign type 'string | undefined 'to type' string | number | any [] '.

but normal (html) inputs no.

the cause is the declaration file it does not contain undefined

modelValue: string | number;

I am using DTOs which may have null or undefined values, DTOs are generated with OpenApi Generator, and any fields not required are converted to string | undefined. so either I have to change the q-input by input, or else create intermediate DTOs and do a DTO <-> [DTO without undefined] mapping, which will add complexity for nothing and a loss of performance

OR add undefined to all modelValue on Quasar declaration file ? like this : modelValue: string | number | undefined;

if you have any solutions or tips for this kind of problem, i will be very grateful to you

example :

-------> script

interface TestDTO
{
  a: string | undefined;
  b: string;
}

const entry : Ref<TestDTO> = ref(<TestDTO>{});

-----> in template :

** with Volar 
<q-input v-model="entry.a" />   // Volar cast error
<q-input v-model="entry.b" />  // OK 

<input v-model="entry.a" />   // OK

** with Vetur 
<q-input v-model="entry.a" />   // OK
<q-input v-model="entry.b" />  // OK 

<input v-model="entry.a" />   // OK

even by forcing the values, still the same problem with Volar

const entry : Ref<TestDTO> = ref(<TestDTO>{a: '',  b: ''});

Platform (please complete the following information): Quasar Version: 2.1.4

thank you for your precious time…

[rstoenescu]

Made other improvements as well.

[ItsClemi]

Awesome!

Does Volar require the modelValue property in the type definitions?

Because when used with tsx, ts also requires this property which then clashes with v-model usage. Therefore we currently replace all required modelValue: properties with optional ones via patch files.

Eg.:

@@ -1362,7 +1362,7 @@ export interface QBtnDropdownProps {
   /**
    * Controls Menu show/hidden state; Either use this property (along with a listener for 'update:modelValue' event) OR use v-model directive
    */
-  modelValue: boolean;
+  modelValue?: boolean;
   /**
    * Size in CSS units, including unit name or standard size name (xs|sm|md|lg|xl)
    */

Thanks 🥳