Vue.jsでfirebaseのログイン情報をリアクティブに編集したいです

現在vueとfirebaseで認証機能とユーザーの編集機能を作ろうとしています。
認証機能はGoogleログインを使用して完成しています。

今回はそこで取得したユーザーの名前と写真をフォームから変更したいです。

しかしdataと連携しようとした時に以下のエラーが出てしまっています。

Property or method "updatedName" is not defined on the instance but referenced during render. Make sure that this property is reactive, either in the data option, or for class-based components, by initializing the property.

dataとv-modelがうまく連動できていないと思うのですが、そもそも編集可能なのかというところからわからなかったので質問させていただきました。

vue
1<template>
2  <div>
3    <h2>Editing User</h2>
4    <form @submit.prevent="updateUser">
5      <v-text-field
6        v-model="updatedName"
7        label="Name"
8        required
9      ></v-text-field>
10      <v-textarea
11        v-model="introduction"
12        label="Opinion"
13        required
14      ></v-textarea>
15      <v-file-input v-model="updatedImage" accept="image/*" label="Profile Image" @change="changeProfileImage"></v-file-input>
16      <img :src="updatedImage" height="150">
17      <v-btn class="mr-4" type="submit">Update User</v-btn>
18    </form>
19  </div>
20</template>
21
22<script>
23export default {
24  data () {
25    return {
26      updatedName: this.user.name,
27      introduction: '',
28      updatedImage: this.user.image
29    }
30  },
31  computed: {
32    user () {
33      return this.$store.getters.user
34    }
35  },
36  methods: {
37    updateUser () {
38
39    },
40    changeProfileImage () {
41      this.$store.dispatch('changeProfileImage')
42    }
43  },
44  created(){
45    console.log(this.user.name) //ちゃんと名前が取得できている
46  }
47}
48</script>