I have an auth module as follow:

import { VuexModule, Module, Mutation, Action } from "vuex-module-decorators";
import { LoginDTO, UserInterface } from "./type/auth";

@Module({
  namespaced: true,
  name: "auth",
})
export default class Auth extends VuexModule {
  public token = "";
  private user: UserInterface | null = null;

  @Action
  public login(credentials: LoginDTO): void {
    console.log(credentials);
  }
}

signin.vue

<template>
  <div>
    <h1>signin</h1>
    <form @submit.prevent="submit">
      <input type="text" v-model="username" placeholder="username" />
      <input type="text" v-model="password" placeholder="password" />
      <input type="submit" value="submit" />
    </form>
  </div>
</template>

<script lang="ts">
import { Component, Vue } from "vue-property-decorator";
import { namespace } from "vuex-class";
import { LoginDTO } from "@/store/module/type/auth";

const auth = namespace("auth");

@Component
export default class Signin extends Vue {
  private username = "";
  private password = "";

  private credentials: LoginDTO = {
    username: this.username,
    password: this.password,
  };

  private submit(): void {
    this.login(this.credentials);
  }

  @auth.Action
  public login: (credentials: LoginDTO) => void;
}
</script>

Now, when I call login action from component, on submit of the form, then it throws errors in the console as "Are you trying to access this.someMutation() or this.someGetter inside an @Action?"

index.js?6fc5:281 Uncaught (in promise) Error: ERR_ACTION_ACCESS_UNDEFINED: Are you trying to access this.someMutation() or this.someGetter inside an @Action? That works only in dynamic modules. If not dynamic use this.context.commit("mutationName", payload) and this.context.getters["getterName"]