Strange typing for v-for

[crystalfp]

Strange problem. I have the following SFC component (simplified):

<script>
interface ParentProject {
    name: string;
    id: string;
}

class DocumentInProjects {
    public parents = ref<ParentProject[]>([{name: "abc", id: "123"}]);
}

const dip = new DocumentInProjects();
</script>

<template>
<div v-for="prj of dip.parents" :key="prj.id">{{ prj.name }}</div>
</template>

It fails at runtime for id not existing on undefined. And VSC complains that prj has no members id and name.

Intellisense said prj type is true | ParentProject even if dip.parents has type ParentProject[]. Where true came from?

The only workaround I found is to add the following line after the class instantiation:

const {parents} = dip;

and using this parents variable in the template.

Why? Seems the point in v-for confuses the compiler. What I'm missing? I never put a true value in the array.
Thanks for your help in understanding!
mario

[gimjin]

This has nothing to do with v-for, it has to do with the unwrapping in template, vue doc has already given the answer.

simple demo