道場生の情報を表示させたい。

Question

前提・実現したいこと

Nuxt.jsとfirebaseを使って道場生アプリを製作中です。道場生の情報を取得することはできたのですが表示させることができず困っています。

発生している問題・エラーメッセージ

エラーメッセージは表示されません。

該当のソースコード

<template>
    <v-app>
        <v-main>
            <v-container>
                <v-row>
                    <v-col>
                        <v-card>
                            <v-card-title>
                                    <!-- <StudentDetail :firstName="student.firstName">
                                </StudentDetail> -->
                                名前：{{student.firstName}}
                            </v-card-title>
                        </v-card>
                    </v-col>
                </v-row>
            </v-container>
        </v-main>
        <div class="itemContainer">
        </div>
        <div class="button">
            <nuxt-link to="/">戻る</nuxt-link>
        </div>
    </v-app>
</template>

<script>
    import axios from 'axios';
    import { db } from '~/plugins/firebase.js'
    import StudentDetail from '~/components/StudentDetail.vue'
    import { mapGetters } from 'vuex'

    export default {
        data() {
            return {
                firstName :'',
                student: []
            }
        },
        components: { StudentDetail },
        created () {
            const studentId = this.$route.params.id
            db.collection('students').doc(studentId).get().then(doc =>{
                const student = (doc.id, '=>', doc.data());
                console.log(student.firstName)
            })
        },
        computed: {
        ...mapGetters({students: 'getStudents' })
        },
    }
</script>

試したこと

thisを使わないとdata内のstudentはいじれませんのでその方法を模索しているのですが、ピンとこず困っています。
cosole.log(firstName)でデータとってこられるようにしたいです。

補足情報（FW/ツールのバージョンなど）

ここにより詳細な情報を記載してください。

Answer 1

名前：{{student.firstName}}

をthis.firstNameにすることで解決しました。