I am trying to display the borders of a country from restcountries api (https://restcountries.eu/) as clickable buttons.

this is how I try to build the url for the api

    mounted() {

        axios
        .get(this.urlDetail)
        .then(response => (
            this.details = response.data[0]
        ))
        
        this.borders = this.details.borders.join(";");
        this.urlBorders = "https://restcountries.eu/rest/v2/alpha?codes=" + this.borders;


        fetch(this.urlBorders)
            .then(res => res.json())
            .then(data => this.bordersData = data)

the problem is, that the details array is empty at that moment. When I reload the page, the data is fetched correctly.

I tried to:

• use beforeMount()
• use a isFetching boolean
• get the data with @click-function
• tried is with these function in mounted():

        document.onreadystatechange = () => {
            if (document.readyState == "complete") {
              console.log('Page completed with image and files!')
            }
        }

this is my data:

    data() {
        return {
            isFetching: true,
            urlDetail: 'https://restcountries.eu/rest/v2/name/' + this.$route.params.countryName,
            details: [],
            borders: "",
            urlBorders: "",
            bordersData: []
        }

this is the relevant html snipped to display the buttons:

<p><strong>Border Countries:</strong><button class="border-button" v-for="border in bordersData"><router-link :to="{ name: 'border', params: {borderName: border.name}}">{{ border.name }}</router-link></button></p>

thanks for helping!