Displaying a b-table with different arrays inside other arrays in Bootstrap.vue

I have some data I'm trying to display in a b-table

It works fine with most data, but when I hit another array inside the referenced array, it doesn't render properly.

So I tripped over this markup

<template v-slot:cell(name)="data">
   <b class="text-info">{{ data.value.last.toUpperCase() }}</b>, <b>{{ data.value.first}}</b>
</template>

From bootstraps' table documentation.

That's great! Unfortunately, I can't get data out properly.

The issue is that the data contains different types of arrays depending on what is being used:

"range": {
        "type": "point",
        "distance": {
           "type": "touch"
         }
},

and

"range": {
     "type": "point",
      "distance": {
       "type": "feet",
       "amount": 150
    }
},

So I can easily retrieve the type variable, as it's always there, but in case distance.type and distance.amount exists, I'd want to display that as well. Unfortunately this causes an error - because sometimes it doesn't contain amount.

<b-table striped hover :items="spells">
   <template v-slot:cell(range)="rangeData">
      <b class="text-info">
         {{rangeData.item.range.distance}}, <--- this displays the content of the problematic array
         {{rangeData.item.range.distance.feet}}, <-- this causes undefined errors and fails to load
         {{rangeData.item.range.type}}  <--- this displays properly
     </b>
   </template>
</b-table>

So a solution I was hoping to find, was to make a conditional field, which checks if the data is reachable, if not, don't display anything. But I can't find any answers or documentation for it.

Wrapping distance.feet in a v-if still causes errors and then doesn't display anything.