I'm getting and displaying data from an API (https://restcountries.com/), but I can't use the router-link tag to hyperlink each table entry to its own page. Nothing happens, no errors, no link text.

<template>
    <div>
        <b-table responsive head-variant="dark" striped hover :items="countries" :fields="headings">
            <template #cell(name)="data">
                <router-link :to="{name: 'country', params: {country: country.name.official}}">
                    {{ data.value }}
                </router-link>
            </template>
        </b-table>
    </div>
</template>

<script>
import axios from '@/config'

export default {
    name: 'AllCountries',
    components: {},
    data() {
        return {
            headings: [
                {
                    key: 'name.common',
                    sortable: true
                },
                {
                    key: 'capital',
                    sortable: true
                },
            ],
            countries: []
        }
    },
    mounted() {
        axios.get('/all')
        .then(response => {
            console.log(response.data)
            this.countries = response.data
        })
        .catch(error => console.log(error))
    }
}
</script>

If I remove .common from the key "name", router-link works, but it will show all variations of the country name, not just the one "common" name I want. Additionally, if you remove .common, the router link will not work as shown below:

"TypeError: Cannot read property of undefined (read 'name')" "Property or method 'country' is not defined on the instance and is referenced during rendering."

While I haven't gotten these errors elsewhere using this exact router link, and "name" is not defined in these files), the only way I can get the router link link is to use these parameters: { id: data.item._id } (although it doesn't link to anything (it tries to link to '/undefined?fullText=true'))