Computed is not updated when state changed?

Question

Design

I know that computed cached , and will be changed when the state is changed, but for some reason my state is updated, and computed remains old.
Here are the pieces of code, the whole code will not work out, too much.

const state = () => {
  items: [],
};

export default state;

[MUTATION_LOAD_LAST_COMMENTS] (state, {itemLoopIndex}) {
        // @todo - this is dummy data, should come from API
        const randomTrueFalse = Math.floor(Math.random() * 2) + 1;
        const comments = [];
        if (!state.items[`'${itemLoopIndex}'`] && 0 === randomTrueFalse % 2) {
            for (let iterator = 0; iterator < 5; iterator++) {
                comments.push(
                    {
                        id:        iterator,
                        author:    {
                            id:        1,
                            fullName:  'Andrew Stark',
                            avatarUrl: 'https://cdn.vuetifyjs.com/images/lists/2.jpg',

                        },
                        createdAt: iterator + ' hours ago',
                        content:   'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor ' +
                                   'incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation' +
                                   ' ullamco laboris nisi ut aliquip ex ea commodo consequat.',
                    },
                );
            }
        }

        state.items[`'${itemLoopIndex}'`] = comments;
    },
export default mutations;

const getters = {
    [GET_IS_COMMENTS_LOADED]:     state => ({itemLoopIndex}) => {
        return !!state.items[itemLoopIndex];
    },
};

export default getters;

computed: {
        ...mapGetters(
            LISTS,
            {
                isCommentsLoaded: `${LIST_POSTS_COMMENTS}/${GET_IS_COMMENTS_LOADED}`,
            }
        ),
    },

computed work only the first time and display false, which is quite logical, they are cached and that's it. When the action of adding comments occurs, computed is not called, and the old UI hangs, but comments need to be drawn.
Naturally, the getter and action are from the same module and work with the same state.
State is declared as a method for reactivity, only it is not there.

I repeat, the state has been updated, comments have been added at the desired index, ala dummy post ID.

For what reasons could this be?
Perhaps this is due to the fact that the list is dynamic? the first time the getter is called, it is bound to undefined because the user hasn't clicked on "load comments" for the post yet, so undefined has never been updated, resulting in the getter being cached for undefined.

Answer 1

Start by defining the problem. The design must fulfill the stated goals. If it doesn’t, then you need to first determine them, so that there is something to solve. If the objectives are met, then "design for the sake of design should not be encouraged (c)".

Answer 2

Telecom engineer and programmer advise in design. I doubt that "something" will come of this. Do not change, but demolish and start from a blank canvas

Answer 3

Benjamin whole design

Answer 4

const state = () => {
  items: [],
};

state.items[`'${itemLoopIndex}'`] = comments;

I wonder what the documentation says about this? Yes , here's what :

Vue cannot track the following changes to an array:
1. Directly setting an element by index:vm.items[indexOfItem] = newValue

Yes, and some kind of game as an index (maybe you should use an object instead of an array here?).