Como mapear objetos JSON com VueJS e AXIOS - json, vue.js, axios

Como mapear o objeto JSON com a variável? Não tenho certeza se minha codificação está correta ou não. Eu apenas comecei a estudar em Vuejs. Por favor, veja minha codificação. Quero mapear os dados do jSON para a variável "country".

  var appZone = new Vue({
el: "#el",
data() {
return {
country:  [],
shoppingItems: [
{name: "apple", price: "10"},
{name: "orange", price: "12"}
]
}
},
mounted() {
axios.get("/wp-json/tour-api/v1/search/11361")
.then(function (response) {
console.log(response);
this.country = response.json();

})
.catch(function (error) {
console.log(error);
});
}
})

<script src="https://unpkg.com/vue"></script>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<div id="el">
<ul>
<li v-for="item in country">
{{ item.country_id }}  -  {{ item.title }}
</li>
</ul>
</div>

Aqui estão meus dados JSON

Respostas:

Mude a função montada para

mounted() {
var self = this
axios.get("/wp-json/tour-api/v1/search/11361")
.then(function (response) {
console.log(response);
self.country = response.data;
})
.catch(function (error) {
console.log(error);
});
}

self está sendo usado para manter uma referência ao original, mesmo quando o contexto está mudando. É uma técnica frequentemente usada em manipuladores de eventos (especialmente em fechamentos).