How to use vuex mutation in Nuxt

Question

I am not able to use this mutation to change the state of a value in Vuex

pages/example.vue

<template>
  <div class="pa-md-10 mx-md-10">
    <v-row>
      <div>
        <v-btn @click="CLOSE()">CLOSE</v-btn>
      </div>
      <div>
        {{ recipeFormDialog }}
      </div>
      <div>
        <v-btn @click="OPEN()">OPEN</v-btn>
      </div>
    </v-row>
  </div>
</template>

<script lang="ts">
import { Component, Prop, Vue } from 'vue-property-decorator';
import { State, Mutation, Action } from 'vuex-class';

@Component
export default class ExamplePage extends Vue {
  @State recipeFormDialog!: boolean;

  @Mutation OPEN!: () => void;

  @Mutation CLOSE!: () => void;
}
</script>

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> = {
  getRecipeFormDialogState: (state) => {
      return state.recipeFormDialog
  },
}

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

export const mutations: MutationTree<State> = {
  OPEN (state: State): void {
    state.recipeFormDialog = true
  },
  CLOSE (state: State): void {
    state.recipeFormDialog = false
  },
}

For some reason it causes an error when I press the button which should trigger the mutation

The state value renders fine, so it seems the module is declared properly.

Any advice would be greatly appreciated!

Thanks, Austin H

EDIT: When I use the mapMutation in the @Component({computed: ...}) it works as intended however I would like to leverage the vuex-class solution given I typically only interact with class-based components. The mapped Mutation object is not accessible within the class component