bootstrap-vue Custom data rendering sorting by item key (simpler than formatter) - bootstrap-vue

Question

Using https://bootstrap-vue.org/docs/components/table#custom-data-rendering
would like to enable sorting on some columns, eg by "First name and age"
Docs say it's not possible to sort by custom rendered data, which is ok. For the "First name and age" column, I'd like to specify sortKey to be age field, which exists in items.
{ key: 'nameage', label: 'First name and age', sortable: true, sortKey: 'age' }
However, setting sortKey has no effect. Could this be accomplished, without using a custom formatter and sort/compare function?
Full code:
<template>
<div>
<b-table small :fields="fields" :items="items" responsive="sm">
<!-- A virtual column -->
<template #cell(index)="data">
{{ data.index + 1 }}
</template>
<!-- A custom formatted column -->
<template #cell(name)="data">
<b class="text-info">{{ data.value.last.toUpperCase() }}</b>, <b>{{ data.value.first }}</b>
</template>
<!-- A virtual composite column -->
<template #cell(nameage)="data">
{{ data.item.name.first }} is {{ data.item.age }} years old
</template>
<!-- Optional default data cell scoped slot -->
<template #cell()="data">
<i>{{ data.value }}</i>
</template>
</b-table>
</div>
</template>
<script>
export default {
data() {
return {
fields: [
// A virtual column that doesn't exist in items
'index',
// A column that needs custom formatting
{ key: 'name', label: 'Full Name' },
// A regular column
'age',
// A regular column
'sex',
// A virtual column made up from two fields
{ key: 'nameage', label: 'First name and age', sortable: true, sortKey: 'age' }
],
items: [
{ name: { first: 'John', last: 'Doe' }, sex: 'Male', age: 42 },
{ name: { first: 'Jane', last: 'Doe' }, sex: 'Female', age: 36 },
{ name: { first: 'Rubin', last: 'Kincade' }, sex: 'Male', age: 73 },
{ name: { first: 'Shirley', last: 'Partridge' }, sex: 'Female', age: 62 }
]
}
}
}
</script>