Vuejs - получение нескольких повторяющихся вызовов функций при загрузке страницы

Question

Я новичок в Vuejs и понятия не имею, почему у меня возникает эта проблема. Я использую данные из бесплатного Pokemon API [pokeAPI], чтобы создать небольшой pokedex. У меня проблема с получением списка ходов для выбранного покемона. Когда выбирается первый покемон, он запускает функцию «move ()», которая выполняет вызов для получения списка перемещений, но вместо того, чтобы просто запускать один раз, а затем завершать его, он будет выполняться несколько раз. Вот мой код для файлов vue и js.

index. vue

<template>
  <div v-if="data != null" id="poke_data">
    <h2 class="poke_name">
      <span>#{{data.id}}</span> {{ data.name }}
      <ul class="type_list">
        <li v-for="type in data.types" v-bind:value="type.type.name" class="type">{{type.type.name}}</li>
      </ul>
    </h2>

    <div class="pokemon_sprite">
      <h2 v-if="data.sprites.front_female">Male {{data.name}}</h2>
      <div>
        <img v-if="data.sprites.back_default" :src='data.sprites.back_default' />
        <img :src='data.sprites.front_default' />
      </div>
      <div>
        <img v-if="data.sprites.back_shiny" :src='data.sprites.back_shiny' />
        <img :src='data.sprites.front_shiny' />
      </div>
    </div>

    <div v-if="data.sprites.front_female" class="pokemon_sprite">
      <h2>Female {{data.name}}</h2>
      <div>
        <img v-if="data.sprites.back_female" :src='data.sprites.back_female' />
        <img :src='data.sprites.front_female' />
      </div>
      <div>
        <img v-if="data.sprites.back_shiny_female" :src='data.sprites.back_shiny_female' />
        <img :src='data.sprites.front_shiny_female' />
      </div>
    </div>

    <div class="pokemon_info" :class="{ 'side_pokemon_info' : !data.sprites.front_female}">
      <p><span>Height:</span> {{ data.height | formatNumber }} m</p>
      <p><span>Weight:</span> {{ data.weight | formatNumber }} kg</p>
      <p><span>Base Experience:</span> {{ data.base_experience }}</p>

      <div>
        <ul>
          <li v-for="ability in abilities">
            <strong>{{ability.name}}</strong>
            <p v-for="effect in ability.effect_entries" v-if="effect.language.name=='en'">{{effect.effect}}</p>
          </li>
        </ul>
      </div>
    </div>
    <div id="pokemon_stats">
      <table>
        <thead>
          <tr>
            <th v-for="stat in data.stats">{{stat.stat.name}}</th>
          </tr>
        </thead>
        <tbody>
          <tr>
            <td v-for="stat in data.stats">{{stat.base_stat}}</td>
          </tr>
        </tbody>
      </table>
    </div>
    <div class="list_container">
      <h2>Learnable Moves</h2>
      <div id="move_list">
        <ul class="list_head">
          <li>Name</li>
          <li>Type</li>
          <li>Damage type</li>
          <li>Power</li>
          <li>Accuracy</li>
          <li>Power Points</li>
        </ul>

        <ul v-for="move in moves" class="list_body">
          <li>{{move.name}}</li>
          <li><p v-bind:value="move.type.name" class="type">{{move.type.name}}</p></li>
          <li><p v-bind:value="move.damage_class.name" class="type">{{move.damage_class.name}}</p></li>
          <li v-if="move.power">{{move.power}}</li><li v-else>-</li>
          <li v-if="move.accuracy">{{move.accuracy}}</li><li v-else>-</li>
          <li>{{move.pp}}</li>
          <li v-if="move.effect_entry">{{move.effect_entry}}</li>
          <li v-else>
            <p v-for="effect in move.effect_entries" v-if="effect.language.name=='en'" v-bind:value="move.effect_chance">{{effect.effect}}</p>
          </li>
        </ul>
      </div>
    </div>
  </div>
</template>
<script src="./script.js"></script>

script. js

// src/GithubUserData/script.js

import bus from '../bus'
import Vue from 'vue'


export default {
  name: 'GithubUserData',
  props: ['data'],
  data() {
    return {
      moveData: {},
      abilityData: {}
    }
  },
  filters:{
    formatNumber: function(value){
      var value = value.toString()
      return value.substring(0,value.length-1)+"."+value.substring(value.length-1);
    }
  },
  computed: {
    moves() {
      var moves = this.data.moves;
      var movesLength = moves.length;
      console.log(1)
      this.testAxios(this.moveData, 3, moves, 'moves')
      return this.moveData
    },
    abilities() {
      var abilities = this.data.abilities;
      var abilitiesLength = abilities.length;
      //console.log(2)
      this.testAxios(this.abilityData, abilitiesLength, abilities)
      return this.abilityData
    }
  },
  methods: {
    testAxios(dest, len, info, type){
      for (let  i = 0; i < len; i++) {
        if(type =='moves'){
          var url = `${info[i].move.url}`
        }else{
          var url = `${info[i].ability.url}`
        }
        
        axios.get(url)
        .then(response => {
          if(type =='moves'){
            var effects = response.data.effect_entries;
            for(let i = 0; i < effects.length; i++){
              if(effects[i].language.name == 'en' && response.data.effect_chance){
                var effect = effects[i].effect
                effect.toString()
                effect = effect.replace("$effect_chance", response.data.effect_chance)
                Vue.set(response.data, 'effect_entry', effect)
              }
            }
          }
          Vue.set(dest, i, response.data)
        })
        .catch((error) => {
          console.log(error)
        })
      }
    }
  }
}

Any Покемон, выбранный после первого, загрузится нормально и вызовет функцию только один раз, а не несколько раз. Пытался разобраться в этом пару дней, но ничего не добился. Если у кого-то есть понимание, это будет очень признательно.

Вывод Console.log, показывающий, что функция вызывается более одного раза введите здесь описание изображения