title: Vuex: Getter is not fetching data from external API
body: <p>I'm trying to fetch data from an external API and display the data in my component but it is returning an empty array when I actually have data in my API.
  Inside my module I have the following:</p>
  
  <pre><code>import axios from 'axios';
  
  const state = {
      countries = []
  }
  
  const getters = {
      allCountries: (state) =&gt; state.countries;
  }
  
  const actions = {
      //Fecth all the countries from the API
    async fetchCountries({ commit }) {
      const response = await axios.get('URL');
      commit('setCountries', response.data);
    },
  }
  
  const mutations = {
      setCountries: (state, countries) =&gt; (state.countries = countries),
  }
  
  export default {
    state,
    getters,
    actions,
    mutations,
  };
  </code></pre>
  
  <p>Component:</p>
  
  <pre><code>&lt;template&gt;
      &lt;div v-for="country in allCountries" :key="country.id"&gt;
         &lt;small&gt;{{country.name}}&lt;/small&gt;
      &lt;/div&gt;
  &lt;/template&gt;
  &lt;script&gt;
  import { mapGetters} from 'vuex';
  
  export default{
      name: 'CompCountry',
      computed: mapGetters(['allCountries'])
  }
  &lt;/script&gt;
  </code></pre>