vuex-module-decoratorでstateをundefinedにすると変更が検知されない

前提

• Nuxt
• vuex-module-decorator
• typescript

Vue側はVue.extendで実装
vuex-module-decoratorはtypescriptでvuexを書くことができるライブラリ

ダメな例

// ~/store/message.ts
@Module({
  stateFactory: true,
  name: 'message',
  namespaced: true
})
export default class Message extends VuexModule {
  message?: Message
}

// ~/store/index.ts
import { Store } from 'vuex'
import { initializeStores } from '~/utils/store-accessor'
const initializer = (store: Store<any>) => initializeStores(store)
export const plugins = [initializer]
export * from '~/utils/store-accessor'

// ~/util/store-accessor.ts
import { Store } from 'vuex'
import { getModule } from 'vuex-module-decorators'
import Message from '~/store/message'

// eslint-disable-next-line import/no-mutable-exports
let messageStore: Message

function initializeStores(store: Store<any>): void {
  messageStore = getModule(Message, store)
}

export {
  messageStore,  
}

<script lang="ts">
import Vue from 'vue'
import { messageStore } from '~/utils/store-accessor'

export default Vue.extend({
  computed: {
    user() {
      return messageStore.user // 変更されてもcomputedの値は変わらない
    }
  }
})
</script>

解決策

undefinedにしてしまうと、初期状態の際には、propertyが存在しないという状態になってしまうため、
nullableに変更して対応

// ~/store/message.ts
@Module({
  stateFactory: true,
  name: 'message',
  namespaced: true
})
export default class Message extends VuexModule {
  message: Message | null = null
}