[Vuejs]-Trouble defining interface correctly TS2339: Property 'x' does not exist on type 'y' and with using a vue ref

When you create a ref without initial value it is undefined by default. This also affects the type, so purchaseInfo is actually Ref<PurchaseInfo | undefined>.

So you just need a check in the template to handle the loading state, when purchaseInfo has no value yet:

<template>
  <table v-if="purchaseInfo">
    <tr v-for="(item, index) in purchaseInfo.orderedItems" />
  </table>
  <div v-else>
    You can put some loader here, or render nothing.
  </div>
</template>

I wish I can say what fixed this. It looks like the compiler kept picking up on something bad and decided to start building fine.