To-dos don't update when I choose a to-do list-CodePudding

I have two components: TodoList and TodoListsList. They get their data from states in todos.js and todoLists.js modules accordingly. When I choose some to-do list, i.e mark it as active, TodoListsList is updated, but TodoLists isn't, thought the data is updated. Here's how I do it.

todoListsState and markAsActive() (todoLists.js):

import todos from '@/modules/todos.js'

// ... some code ...

const todoListsState = reactive({
    todoLists: [],
    todoListsAreLoading: false,
    removedTodoListId: null,
    editedTodoListId: null,
    editedTodoListName: '',
    baseTodoListsApiUrl: process.env.VUE_APP_BASE_TODO_LISTS_API_URL,
    todoListCreationFormModalId: 'todoListCreationFormModal',
    todoListNameChangeFormModalId: 'todoListNameChangeFormModal'
});

// ... some code ...

function markAsActive(value) {
    let { close } = infoToast();
    if (value) {
        axios.post((todoListsState.baseTodoListsApiUrl   'mark-as-active'), {
            activatedTodoListId: value
        }).then(function () {
            getTodoLists();
            const { getTodos } = todos();
            getTodos();
        }).catch(function () {
            dangerToast('Failed to mark to-do list as active.');
        }).finally(() => {
            close();
        });
    }
}

todosState and getTodos() (todos.js):

const todosState = reactive({
    todos: [],
    activeTodoListId: 0,
    removedTodoId: null,
    editedTodoId: null,
    editedTodoText: '',
    todosAreLoading: false,
    baseTodosApiUrl: process.env.VUE_APP_BASE_TODOS_API_URL,
    todoAdditionFormModalId: 'todoAdditionFormModal',
    todoEditFormModalId: 'todoEditFormModal'
});

// ... some code ...

async function getTodos() {
    try {
        todosState.todosAreLoading = true;
        const response = await axios.get(todosState.baseTodosApiUrl);
        todosState.activeTodoListId = response.data[0];
        todosState.todos = response.data[1];
    } catch (e) {
        dangerToast('To-dos loading failed.');
    } finally {
        todosState.todosAreLoading = false;
    }
}

How does todosState.todos look in console:

todosState.todos when Todos.vue is mounted:

It doesn't look like the array looses it's reactivity.

If you need something else to understand my question, feel free to ask. Help appreciated.

CodePudding user response：

The problem is solved! I have just moved todosState out of

export default function () {}

and it works! Finally! This thread helped me a lot.