Магазин Vuex возвращает [__ob__: Observer] в методе created () вместо строки

У меня есть магазин Vuex, содержащий строку username. Первоначально для него задана пустая строка, но каждому пользователю, новому или старому, изначально будет назначена случайная строка.

Я хочу разрешить пользователям изменять свое имя пользователя. Я также хочу отображать имя пользователя в качестве исходного value в текстовом вводе.

Однако начальное значение - это просто пустая строка. При регистрации username в created (или любых последующих методах жизненного цикла) я получаю [__ob__: Observer]. Если я установлю тайм-аут 500 мс, я получу ожидаемую строку, но для меня это слишком беспорядочно.

Вот соответствующий код:

<template>
  <form @submit.prevent>
    <input
      type = "text"
      v-model = "usernameField"
    />
    <button @click = "usernameUpdate()">
      Submit
    </button>
  </form>
</template>

<script lang = "ts">
  import { Vue, Component } from 'vue-property-decorator'
  import { namespace } from 'vuex-class'

  const AccountGetter = namespace('account').Getter
  const AccountAction = namespace('account').Action

  const AppProps = Vue.extend({
    data: () => {
      return {
        usernameField: ''
      }
    },
    created() {
      this.usernameField = this.username
      console.info(this.username)
      // returns [__ob__: Observer]
      // using setTimeout() works though
    },
    methods: {
      async usernameUpdate() {
        // working code using updateUserProfile
      }
    }
  })

  export default class VerifyGame extends AppProps {
    @AccountGetter username!: String;
    @AccountAction updateUserProfile
  }
</script>

Магазин Vuex:

// also includes updateUserProfile mutation

import { AccountState, RootState } from './types'
import { GetterTree } from 'vuex'

type AccountGetter = GetterTree<AccountState, RootState>

export const state: AccountState = {
  username: ''
}

export const getters: AccountGetter = {
  username: state => state.username
}