Не работает система реактивности Vue.js

В mounted устанавливаю значение abilities. На странице должны выводится данные из этого свойства, но ничего не выводится. Попробовала вывести это свойство целиком на странице - вывелись пустые фигурные скобки. Хотя если посмотреть во Vue Developer, это свойство правильно изменилось.

data() {
    return {
        pokemonInfo: null,
        abilities: null,
        ready: false
    }
},
mounted: function () {
    var id = this.$router.currentRoute.path.slice(1);
    var abili = {};
    this.$axios.get(`https://pokeapi.co/api/v2/pokemon/${id}`)
        .then((response) => {
            this.pokemonInfo = response.data
            for (let i = 0; i < this.pokemonInfo.abilities.length; i++) {
                this.$axios.get(this.pokemonInfo.abilities[i].ability.url)
                    .then((response) => {
                        abili[i] = response.data;
                    })
            }
            this.abilities = abili;
            this.ready = true;
        })
},

Вот тут вот данные должны выводится, выше это завернуто в блок с v-if="ready"

<h2>Abilities:</h2>
<p v-for="(item, index) in abilities">{{abilities[index].ability.name}}</p>
<p>{{abilities}}</p>