I want to make a List component generic. The List component is a real time search for listing the top 5 results in a list so user can click into it to take over to input field. I have this functionality for a lot input fields. This works just fine if I use T and U as a name. But in the parent component I would like to use specific names (so it’s better to understand what this list is for). Here is an example:

Parent.vue:

<List v-model:T="form.my_input" v-model:U="elements" />

Child.vue:

<script setup lang="ts" generic="T extends String, U extends Object">

type type = {
    id: number,
    name: string,
}

const T = defineModel('T', { default: String });
const U = defineModel('U', { default: [], type: Object as () => type[] });

</script>

I think you can see the issue here. I can’t use a name for defineModel in the parent child, I have to use T and U (or whatever I name it in the generic component).

I don’t think there is any better approach for this, am I wrong?