Почему в компоненте не обновляются данные при изменении данных в хранилище?

Question

[Игорь Беляев]

Есть компонент:

<template>
    <div>
        <ul v-for="(user, index) in users.items" :key="index">
            <li>{{ user.name }}</li>
        </ul>
    </div>
</template>

<script>
    export default {
        name: 'UserList',

        mounted() {
            this.fetchUsers()
        },

        computed: {
            users() {
                return this.$store.getters.users
            }
        },

        methods: {
            fetchUsers() {
                this.$store.dispatch('FETCH_USERS')
            }
        }
    }
</script>

Есть хранилище (разделено на модули):

import Vue from 'vue'
import Vuex from 'vuex'

import Users from './store/users'

Vue.use(Vuex)

export default new Vuex.Store({
    modules: { Users }
})

// А это сам модуль "Users"

const state = {
    users: {
        items: [],
        total_items: 0
    }
}

const getters = {
    users: state => state.users
}

const actions = {
    FETCH_USERS ({commit}) {
        fetch(new URL('...'))
            .then(response => response.json())
            .then(response => commit('SET_USERS', response))
            .catch(...)
    }
}

const mutations = {
    SET_USERS (state, users) {
        state.users = users
    }
}

export default {
    state,
    getters,
    actions,
    mutations
}

В данном примере, при переходе на страницу список пользователей будет пустой, т.к. изначально в хранилище ничего нет, а данные с сервера ещё не успели загрузиться. Когда они будут загружены, список всё-равно останется пустой, но при повторном переходе данные отобразятся. Очевидно, что сломалась реактивность. Из-за чего это может быть?

Answer 1

[akass]

Так а VueDevTools что показывают в хранилище?
используйте namespaced модули и mapGetters