Using useTemplateRef with an element inside of v-if and v-for

[hugmouse]

Just want to discuss something because I wonder if I'm doing things completely incorrectly.

So, I have some code that relies on useTemplateRef, but the problem is that this ref is used twice, once in the v-for loop and once without the loop. The type of this template ref is Readonly<ShallowRef<HTMLInputElement | null>>, but in reality it looks like Readonly<ShallowRef<HTMLInputElement | HTMLInputElement[] | null>>. So in one case it's just a HTMLElement and in the other case it's HTMLElement[]. In my project I have to manually assert the type because it kinda looks wrong, but here's the question - should I even do it this way?

At the same time, it seems that type inheritance broke somewhere along the way, but I don't know where I can dig to maybe try to fix this issue and create PR somewhere.

And also using 2 refs instead of one will fix that particular case of type funnies, but maybe there's another way around?

Example

Vue SFC Playground

Screenshot from browser console

Using the code provided in Vue SFC Playground click check button a few times to see logs in the console.