VueJs 'filter is not a function' problem in Vuex getter

I'm completely new to frontend development and Vue js. I want to involve a state managment in my application. I can set the state with the response from my API but when I want to filter the results in getter using filter function (getActiveLeagues) I get an error that 'filter is not a function' as if the result was not an array but I think I declared my state with as an array:

const state = {
  leagues: [],
};

const getters = {
  getAllLeagues: (state) => state.leagues,
  getActiveLeagues: (state) => state.leagues.filter((league) => league.archivated === false),
};

const actions = {

  async getAllLeagues({ commit }) {
    const response = await axios.get(`${server.baseURL}/api/league`);
    console.log(response);
    commit('setLeagues', response);
  },
};

const mutations = {
  setLeagues(state, leagues) {
    state.leagues = leagues;
  },
};

export default {
  state,
  getters,
  actions,
  mutations,
};

and I get an array from API:

Here is how my Vuex.Store call look like:

import Vue from 'vue';
import Vuex from 'vuex';
import posts from './modules/postModule';
import leagues from './modules/leagueModule';

Vue.use(Vuex);

export default new Vuex.Store({
  modules: {
    posts,
    leagues,
  },
});

And the result of state watch: Probably it's a stupid problem cause i'm new to this but I can't see what is wrong at the moment. Thanks for any help.