What is wrong in this type guard?

[iBobik]

Why type guards for this type does not work?

export type OfferDraft = {
    id: any;
    price: number;
    quantity: number;
    dueDate: any;
    product?: {
        id: any;
        title: string;
        imageUrl?: string | null | undefined;
    } | null | undefined;
    size?: {
        id: any;
        title: string;
    } | null | undefined;
} | {
  sizeId: string
  price?: number
  quantity?: number
}

All this did not worked:

<el-input v-if="'size' in offers[$index]" :value="offers[$index].size?.title" disabled />
<el-select v-if="'sizeId' in offers[$index]" v-model="offers[$index].sizeId">
'size' in offers[$index] ? offers[$index].size.title : ''

[so1ve]

https://www.typescriptlang.org/play?#code/C4TwDgpgBA8gZnCAnAIkghnYUC8UDeAvlAD4EBQUUAzgJYBeEAkgCYBcNwStAdgOaUoYbgGMIAfg48ArgFsARskEBHaeh7BaoSVBkKlhcuREB7HtWxwTJjvESoMWANoBdXFCf5BVOo1YcAcgDyQhcjKyQoAApTc2xaKF4oKxMASgoqKlo4aIDfZhYAxJ5k6ydaF3SvTJqoWOoTABsIADpGkz4olPKXFvzWVO8oQ0IgA

TypeScript Limitation

[iBobik]

How to deal with it?