Vuex-module-decorators: Issue with reactivity when using getModule

[smholsen]

Hi. I am having an issue where properties from states I fetch with _getModule_ are not reactive.

I have a Vuex Store like this;

import Vue from 'vue'
import Vuex from 'vuex'
import  { UserStore } from './user/index'
import {getModule} from "vuex-module-decorators";

Vue.use(Vuex);

interface StoreType {
  UserModule: UserStore,
}

const store = new Vuex.Store<StoreType>({
  modules: {
    UserModule: UserStore
  }
});

export default store;
export const UserModule = getModule(UserStore, store);

UserStore is defined like this;

import {Module, VuexModule, Mutation, Action} from 'vuex-module-decorators'
import User from '@/types/User'
import {SharedModule, UserModule} from "@/store";
import Noty from 'noty';

@Module({
    name: 'UserModule',
})
export class UserStore extends VuexModule {
    user?: User = undefined;

    @Mutation setUser(user: User) {
        this.user = user;
    }

    @Action
    signUserInWithEmailAndPassword(request: SignInWithEmailAndPasswordRequest) {
        ... // This method uses an async function inside that calls the below upon completion
        this.setUser(newUser);
        ...
    }
}

And I use it in my component like this;

    import {Watch} from "vue-property-decorator";
    import Vue from "vue";
    import {UserModule} from "@/store";
    import Component from "vue-class-component";
    import User from "@/types/User";

    interface ISignIn {
        user: User | undefined;
    }

    @Component({
        name: 'SignIn'
    })

    export default class SignIn extends Vue implements ISignIn {
        get user() {
            // This is not reactive
            return UserModule.user;
            // This is reactive
            return this.$store.state.UserModule.user
        }
    }

Am I doing anything wrong here? Why is the module as fetched with _getModule_ and imported reactive? Is there any way to fix this?

[brandon-mork]

I believe the issue is in your UserStore declaration:
user?: User = undefined;

Having an unset initial value means that this is not a property on the module, so it does not get declared as reactive. Setting the initial value to null instead should work:
user?: User = null;

[cadenzah]

I hope this kind of little details be written on the official document.