Throw worning for props in vue3 when using with typescript generic - vuejs3

Question

I facing such strange warning.
I defined non-Array types look like posted sample codes.
But, Vue3 was throwing warnings.
Have some solutions??
or I got some miss takes?
Simply, I was defined modelValue type look like T | T[] | undefined
But, Vue3 detected Null | Array.
Then, How a T are have been ignored??
I'm using Nuxt3, Vue3, composition api
// types/index.d.ts
type ItemType { [key: string]: any } | string | boolean
// CSelect.vue
<template><div>{{/* contents - It's not a key on this Topic */}}</div></template>
<script setup lang="ts" generic="T extends ItemType">
defineProps<{
items: T[]
modelValue: T | T[] | undefined
}>()
</script>
// create.vue - how i used
<template>
<div class="create">
<div class="title-area">
<CForm>
<InputTemplate>
{{/* This CSelect components are Throw warnings by v-model */}}
<CSelect
v-model="data.category"
class="nft-input"
:items="categoryItems"
/>
</InputTemplate>
</CForm>
</div>
<div>
</template>
<script setup lang="ts">
const categoryItems = computed(() => ['value1', 'value2', 'value3'])
const data = reactive({ category: String(categoryItems.value[0]) })
</script>
[Vue warn]: Invalid prop: type check failed for prop "modelValue". Expected Null | Array, got String with value "Limited".
at <CSelect modelValue="Limited" onUpdate:modelValue=fn class="input" ... >
at <InputTemplate title="Category" >
at <CForm modelValue=false onUpdate:modelValue=fn class="inputs-area" ... >
at <Create onVnodeUnmounted=fn<onVnodeUnmounted> ref=Ref< undefined > >
at <Anonymous key="/member/99/create" routeProps= {Component: {…}, route: {…}} pageKey="/member/99/create" ... >
at <Anonymous >
at <RouterView name=undefined route=undefined >
at <NuxtPage>
at <Default >
at <Anonymous key="default" name="default" hasTransition=false >
at <Anonymous >
at <Anonymous>
at <App key=1 >
at <NuxtRoot>

Answer 1

Your parent component create.vue has no setup and lang="ts". You're passing to a child v-model and class with no : so they aren't props, they are attributes. div element will have them because he is a root element.
Example how to use attributes:
<template>
<div>
<label :for="label">{{label}}</label>
<input v-bind="$attrs" :id="label" :value="$attrs.modelValue" #input="$emit('update:modelValue', $event.target.value)">
</div>
</template>
<script setup>
defineProps(['label'])
defineEmits(['update:modelValue'])
</script>
v-bind assign all attributes to one element.
I'm not using generic in components, so I can just tell you stop! User don't care about generic, and you are not experienced programmer to build UI libraries for different programmers.