Why is typescript nuxt.js auth() so hard to prepare?

Question

typescript

Please fix my code, because typescript has finally broken my brain.
I'll write the correct one first.

<template>
async createUser() {
  try { 
    await this.$fire.auth.createUserWithEmailAndPassword('[email protected]', 'test')
  } catch (e) { 
    alert(e) 
  }
}
</template>
<script lang="ts">
import Vue from 'vue'
import { mapState, mapGetters } from 'vuex'

export default Vue.extend({
  computed: {
    ...mapState({
      authUser: (state: any) => state.authUser,
    }),
    ...mapGetters({
      isLoggedIn: 'isLoggedIn',
    }),
  },
  // fetch() {
  //   // INFO -> this.$fire.auth user etc. are accessible
  //   // INFO -> this.$store.state.authUser is accessible even on server-side
  // },
  data: () => ({
    formData: {
      email: '',
      password: '',
    },
  }),
  methods: {
    async createUser() {
      try {
        await this.$fire.auth.createUserWithEmailAndPassword(
          this.formData.email,
          this.formData.password
        )
      } catch (e) {
        alert(e)
      }
    },
    async signInUser() {
      try {
        await this.$fire.auth.signInWithEmailAndPassword(
          this.formData.email,
          this.formData.password
        )
      } catch (e) {
        alert(e)
      }
    },
    async logout() {
      try {
        await this.$fire.auth.signOut()
      } catch (e) {
        alert(e)
      }
    },
  },
})
</script>

I honestly rewrite this on ts canvas

<script lang="ts">
import { Vue, Component, Prop, namespace } from 'nuxt-property-decorator'
const user = namespace('users')
@Component
export default class Login extends Vue {

  let infoData = { activeLogin: false, email: '', password: '', remember: false }
  public localData: infoData 
  /*
  {
    activeLogin: false,
    email: '',
    password: '',
    remember: false
  }
  */
    async createUser() {
      try {
        await this.$fire.auth.createUserWithEmailAndPassword(
          this.localData.email,
          this.localData.password
        )
      } catch (e) {
        alert(e)
      }
    }
    
    async signInUser() {
      try {
        await this.$fire.auth.signInWithEmailAndPassword(
          this.localData.email,
          this.localData.password
        )
      } catch (e) {
        alert(e)
      }
    }
    
    async logout() {
      try {
        await this.$fire.auth.signOut()
      } catch (e) {
        alert(e)
      }
    }

  @user.State
  public authUser!: boolean
  @user.Getter
  public isLoggedIn!: string //'isLoggedIn'
  // public updateUserInfo!: object

  mounted() {
   this.localData = { ...this.localData, ...this.infoData }
  }
}
</script>

Result - typescript swears at everything

File /store/users.ts

import { Module, VuexModule, Mutation } from 'vuex-module-decorators'
// state, getter, mutations ts

interface UserData {
  id: number,
  email: string,
  phone: string,
  password: string,
  firstname: string,
  lastname: string
}
@Module({
  name: 'users',
  stateFactory: true,
  namespaced: true
})
export default class User extends VuexModule {
  public authUser: boolean   
  public info: UserData = {
    id: 1,
    email: '',
    phone: '0000000000',
    password: '',
    firstname: '',
    lastname: ''
  }
  get fullName(): string {
    return this.info.firstname + ' ' + this.info.lastname
  }
  @Mutation
  public updateUserInfo(data: UserData) {
    this.info = { ...this.info, ...data }
  }
 
}

Help bring back code clarity! Well, I understand what I'm writing wrong