title: How to handle multiple array filters with Vue JS?
body: <p>Not sure when to use computed properties vs watch to display my data. I'm building an app with the PokeAPI, and I want to toggle between Type and Generation to display the pokemon. So far I have a JS file that stores all the pokemon in an array:</p>
  <pre><code>//pokeData.js
  import axios from 'axios'
  
  const allPokes = [];
  
  export default{
      getPokemon(){
          if(allPokes.length === 0){
              for(let i=1; i&lt;=809; i++){
                  axios.get(`https://pokeapi.co/api/v2/pokemon/${i}`)
                  .then(response =&gt; {
                      allPokes.push(response.data);
                      allPokes.sort((a, b) =&gt; a.id - b.id);
                  });
              }
          }
          return allPokes
      }
  }
  
  </code></pre>
  <p>I don't want to repeatedly call 809 Objects from an API, so I call them in the mounted() in my Vue, and want to filter them from there:</p>
  <pre><code>//Container.vue
  //takes two props, 'currentType' and 'currentGen', to use to filter the pokemon
  
  &lt;template&gt;
          &lt;div 
          v-for=&quot;(pokemon, index) in allPokemon&quot;
          :key=&quot;index&quot;&gt;
              &lt;h2&gt;{{ pokemon.name }}&lt;/h2&gt;
          &lt;/div&gt;
  &lt;/template&gt;
  
  &lt;script&gt;
  import Pokemon from '../pokeData'
  
  export default {
      props: ['currentType', 'currentGen'],
      data(){
          return{
              allPokemon: [],
          }
      },
      mounted(){
              this.allPokemon = Pokemon.getPokemon();
      },
      watch: {
          currentType: function(newType){
              const typePokes = this.allPokemon.filter(pokemon =&gt; {
                      if(pokemon.types[0].type.name == newType){
                          return true
                       }
                    this.allPokemon = typePokes  
              });
  
  </code></pre>
  <p>I know this is wrong, but I don't know how to fix it. I know you can use List Rendering as suggested in the official documents, but it doesn't say how to use it for multiple filters. <a href="https://v2.vuejs.org/v2/guide/list.html#Replacing-an-Array" rel="nofollow noreferrer">https://v2.vuejs.org/v2/guide/list.html#Replacing-an-Array</a></p>
  <p>Any advice is welcome: how to better cache the initial API call; to use watch or computed...</p>