vuex state not updating UI on change

Question

I am in the process of converting a vue2 to vue3 project and noticed my UI isn't updating when objects from my vuex store are updating. Here is how I create my store:

store/index.js

import {mutations} from './mutations';
import {createStore} from 'vuex'

export default createStore({
  state() {
    return {
       ...
    }
   },
   mutations
});

mutations.js

export const mutations = {
  narrative(state, v) {
    state.narrative = v;
  }
};

app.js

import { createApp } from 'vue';
import store from './store/index';

const app = createApp({
  mixins: [
    require('./mixins/base')
  ]
}).use(store)

So when I mutate one of the vuex objects, I write to the console log immediately and see the data has changed

        let narrative = _.find(this.$store.state.narratives, ['id', this.selectedNarrativeId]);
        if (narrative) {
          console.log(narrative.id); // PRINTS CORRECT UPDATED ID
          this.$store.commit('narrative', narrative);
          console.log(this.$store.state.narrative.id); // PRINTS CORRECT UPDATED ID
        }

But the UI does not change. However, if I used a computed property, the UI updates immediately. What am I doing wrong with the vuex store?

computed: {
    currentNarrative() {
        let narrative = _.find(this.$store.state.narratives, ['id', this.selectedNarrativeId]);
        if (narrative) {
          return narrative;
        }
        return {};
      },
}

Versions

• vue 3.2.33
• vuex 4.0.2

Answer 1

Replacing the require by an import + rebooting the machine fixed the issue, maybe some broken was still running on the server.