VuejsでTypeError: Cannot read property 'hoge' of undefined

環境

"firebase": "^3.7.8",
"vue": "^2.2.2",

現象

firebase databaseから値取得してVueで表示させようとしたらconsoleに以下のエラーが出た。

vue.esm.js?65d7:558 [Vue warn]: Error in render function: 
(found in <hogeComponent> at /sample-project/src/components/hogeComponent.vue)

vue.esm.js?65d7:1447 TypeError: Cannot read property 'hoge' of undefined
    at Proxy.render (eval at <anonymous> (app.js:1204), <anonymous>:46:30)
    at VueComponent.Vue._render (eval at <anonymous> (app.js:723), <anonymous>:3608:22)
    at VueComponent.updateComponent (eval at <anonymous> (app.js:723), <anonymous>:2157:21)
    at Watcher.get (eval at <anonymous> (app.js:723), <anonymous>:2468:25)
    at new Watcher (eval at <anonymous> (app.js:723), <anonymous>:2451:12)
    at mountComponent (eval at <anonymous> (app.js:723), <anonymous>:2161:17)
    at VueComponent.Vue$3.$mount (eval at <anonymous> (app.js:723), <anonymous>:7251:10)
    at VueComponent.Vue$3.$mount (eval at <anonymous> (app.js:723), <anonymous>:9300:16)
    at init (eval at <anonymous> (app.js:723), <anonymous>:2930:13)
    at createComponent (eval at <anonymous> (app.js:723), <anonymous>:4655:9)

ソース

hogeComponent.vue

<span class="new badge"
  v-bind:class="{
    blue:data.hoge,
    red:data.fuga}"
  data-badge-caption="">{{data.hogefuga}}
</span>

解決方法

firebase databaseからデータを取得し終える前に描画され、エラーとなっていたようだ。
v-ifでデータの存在を確かめるようにすると解決できた。

//hogeComponent.vue

<span class="new badge"
+ v-if="data"
    blue:data.hoge,
    red:data.fuga}"
  data-badge-caption="">{{data.hogefuga}}
</span>