I'm new in VueJs, actually coming from react, the problem I'm having is that when i fetch the data with an axios.get the console.log shows a succesfull response. But when I to iterate through the Array with v-for it renders nothing. It's quite important so it be super appreciated if you can tell me what im doing wrong or you have a suggestion. heres the code:

    <SignUpForm />
    <h1>Countries List</h1 >
    <div v-for="country in countries" :key="country.name" >
        <p>{{country.name}}</p>
    </div>
</template>

<script>
import SignUpForm from "@/components/SignUpForm.vue";

import axios from 'axios'

export default{
    name: 'SignUpView',
    components:{
      SignUpForm
    }, 
    data(){
      return{
          countries: []
      }    
    },
    async mounted() {
      const {data} = await axios.get('https://gist.githubusercontent.com/keeguon/2310008/raw/bdc2ce1c1e3f28f9cab5b4393c7549f38361be4e/countries.json')
      console.info(data)
      this.countries = data
    }
}

</script>

You can see that what I'm actuallt doing is the axios.get in the mounted(){} f(x), later I = the data to my empty Array declared in data(){}. => So I can iterate trough the json response with a v-for in a div.

Heres the picture so you can see: