nuxt.js - Problem on VueX getters reactivity (Nuxt project)

Question

I am currently working on a draft questionnaire. I have started to encounter a problem that is preventing me from moving forward in this one. For information my project is in Nuxt.

Problematic :

The navigation of the questionnaire is done on a single page.It uses the store's getters to determine which page we should find ourselves on. However when I pass a page in full it does not change the display of the page as it should.

After several searches it turns out that it could come from the fact that I am going to look for my different pages in an array. However, I do not see how to solve this problem in a simple way and without having to redo my entire navigation system.

VueX Code :

// VueX Store (it's a module : questionnaire)

export const state = () => ({
  questionnaire: {
    name: 'My questionnaire',
    themes: [
            {
        name: 'theme 1',
        started: true,
        complete: false,
        themePageAvailable: true,
        nextButton: 'simple',
        label: 'Hello welcome to theme 1',
        questions: [
          {
            type: 'likert',
            statement: "Question 1",
            answer: null
          },
          {
            type: 'likert',
            statement: "Question 2",
            answer: null
          },
          {
            type: 'likert',
            statement: "Question 3",
            answer: null
          },
        ]
      },
      {
        name: 'theme 2',
        started: false,
        complete: false,
        themePageAvailable: true,
        nextButton: 'simple',
        label: 'Hello welcome to theme 2',
        questions: [
          {
            type: 'likert',
            statement: "Question 1",
            answer: null
          },
          {
            type: 'likert',
            statement: "Question 2",
            answer: null
          },
          {
            type: 'likert',
            statement: "Question 3",
            answer: null
          },
        ]
      },
    ]
  },
})

export const getters = {
  currentTheme (state) {
    return state.questionnaire.filter(theme => theme.complete !== true)[0] || 'end'
  },
}

export const mutations = {
  SET_COMPLETE(state, currentTheme) {
    currentTheme.complete = true
  },
}

export const actions = {
  setCompleteTheme({state, commit}, currentTheme) {
    if (currentTheme.questions.some(question => question.answer === null)) {
      console.error('test not complet')
    } else {
      commit('SET_COMPLETE', currentTheme)
    }
  },
}

question from:https://stackoverflow.com/questions/65857039/problem-on-vuex-getters-reactivity-nuxt-project

Answer 1

Waitting for answers