Vue.js+firebase+vuefireでバインド時のprops利用について

Question

前提・実現したいこと

現在Webアプリでユーザー機能がついたチャットを開発しています。（LINEなどのイメージ）
タイトルの通りVueとfirebaseとvuefireで開発しています。

トーク一覧コンポーネントからトーク画面に遷移したときにfirebase内のTalkを格納している部分のkey(TalkID)をpropsで渡しているのですが、
トーク画面コンポーネントでfirebase内のTalkIDを含むReferenceをVuefireでバインディングしたいです。
propsはVueRouterのURLから動的に渡しています。

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

発生している問題としては、トーク画面コンポーネントでfirebaseをバインディングする際、

talkRef=database.ref(`talks/${id}/talk`)

firebase:{
        chats:talkRef
    },

となっているとき、おそらくidを受け取るよりも前にバインディングが実行されてしまい、実際にはないrefにバインディングされてしまいます。

該当のソースコード

<template>
    <div id="container">
        <div id="content">
            <v-toolbar color="orange" dark>
                <v-btn icon @click="$router.go(-1)">
                    <v-icon >arrow_back_ios</v-icon>
                </v-btn>
                <v-toolbar-title>{{id}}</v-toolbar-title>
                <v-spacer></v-spacer>
            </v-toolbar>
           <chat v-for="chat in chats" :key="chat['.key']" :chat="chat"/>
        </div>
        <div class="botbar">
            <form>
                <div class="msr_text_03">
                    <input type="text" v-model="message"/>
                    <button class="send" @click="send(message)">送信</button>
                </div>
            </form>
        </div>
    </div>
</template>
<script>
import { auth } from '../firebase'
import { database } from '../firebase'
import Chat from './Chat'
var talkRef =database.ref('talks')
export default {
    props: ['id'],
    beforeCreate:function(){
        var id=this.$route.params.id
        this.tid=id
        console.log(id)
        talkRef=database.ref(`talks/${id}/talk`)
        this.$bindAsArray('chats', database.ref(`talks/${id}/talk`))
    },
    firebase:{
        chats:talkRef
    },
    components: {
        Chat
    },
    data(){
        return{
            message:'',
            tid:''
        }
    },
    methods:{
        send(message){
            var date = new Date() ;
            var talkRef = database.ref('talks/'+this.id+'/talk')
            talkRef.push({
                message:message,
                time:date.getTime(),
                from:auth.currentUser.uid
            })
            this.message=''
        }
    }
}
</script>

試したこと

beforeCreateなどを使って先に生成できないか等を試しました。

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

"firebase": "^5.1.0",
"vue": "^2.5.2",
"vue-router": "^3.0.1",
"vuefire": "^1.4.5",
"vuetify": "^1.0.19"

Answer 1

auth.onAuthStateChanged((user) => ｛｝でbeforeCreate関数内を括ったら行けました。