How to access Getters in Nuxt using vuex-class

Question

I am building an application using Nuxt. I am playing with vuex for the first time. I have followed a bunch of tutorials to get this set up, but I am running into issues accessing the store and I am starting to think it may be related to Nuxt.

To start, I'd like to control a Vuetify dialog using the store.

store/index.ts

import { GetterTree, ActionContext, MutationTree } from 'vuex'


export type State = ReturnType<typeof state>

// state
export const state = () => ({
  recipeFormDialog: false,
})

// getters
export const getters: GetterTree<State, State> = {
  recipeFormDialog: (state: State) => {state.recipeFormDialog},
}

// mutations
export const mutations = {
  open(state: State): void {
    state.recipeFormDialog = true
  },
  close(state: State): void {
    state.recipeFormDialog = false
  },
}

// actions
export const actions = {
  openRecipeFormDialog(context: ActionContext<State, State>): void {
    context.commit('open')
  },
  closeRecipeFormDialog(context: ActionContext<State, State>): void {
    context.commit('close')
  },
}

pages/example.vue

<template>
  <div>
    {{recipeFormDialog}}
  </div>
</template>

<script lang='ts'>

import {Component, Prop, Vue} from 'vue-property-decorator';
import {Getter} from 'vuex-class';

@Component({})
export default class ExamplePage extends Vue {
  @Getter recipeFormDialog!: boolean;
}

The problem is that recipeFormDialog is undefined and thus will not show on the page. I have not been able to view the value at all. Am I configuring the store improperly?

I would really like to stick with the class-based components and decorators because I find it to be much cleaner than the alternative.

Thanks in advance for the assistance