Vuejs: Component doesn't update data when store data changes. What could be the reason?

Question

JavaScript

Hello. Such a problem: there is a certain component:

<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>

There is some storage (divided into modules):

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
}

In this example, when you go to the page, the list of users will be empty, because. Initially, there is nothing in the storage, and the data from the server has not yet been downloaded. When they are loaded, the list will still remain empty, but when you re-pass, the data will be displayed. It is obvious that the reactivity has broken. Because of what it can be? What did I forget?

Answer 1

So what do VueDevTools show in the repository?
use namespaced modules and mapGetters