ページのリロード時にVuexの値を変数に入れる方法

Nuxt.jsでプロフィールの編集画面を作ろうとしております。

ユーザー情報はFirebaseから取得し、Vuexにuserというstate名で保存してあります。

値の変更後に編集を取り消す機能も付けたかったので、当初、profile.vueのmountedで以下のようにvuexのuserデータをclonedDataという変数に代入してその値を変更するようにしておりました。

<template>
  <div>
    <v-text-field v-model="clonedData.age" />
    <v-btn @click="save">保存</v-btn>
    <v-btn @click="cancel">キャンセル</v-btn>
  </div>
</template>
<script>
export default {

  data() {
    return {
      clonedData: null
    }
  },

  computed: {
    ...mapGetters(['user'])
  },

  mounted() {
    this.clonedData = Object.assign({}, JSON.parse(JSON.stringify(this.user)))
  },

  methods: {
    save() {
      // 変更したデータの保存処理
    },
    cancel() {
      // 変更を取り消す処理
    }
  }
 }
<script>

上記のコードで編集の取り消しは問題なく動作させることができたのですが、このprofile.vueのページをリロードすると、clonedDataが取得されていないことに気付きました。
vuex-persistedstateを入れているので、データはStoreに残っているのですが、描画されません。
上記のような状況の時、リロード時にVuexの値を変数に入れるにはどのようにしたら良いのでしょうか？