Fix asynchronous api

api/index.js

@@ -2,7 +2,7 @@
 import { createAPI } from 'create-api'
 
 const logRequests = !!process.env.DEBUG_API
-let api = {}
+let api = null
 
 let _api = createAPI({
   version: '/v0',
@@ -64,8 +64,9 @@ export function fetchUser(id) {
   return fetch(`user/${id}`)
 }
 
-export function watchList(type, cb) {
+export async function watchList(type, cb) {
   let first = true
+  await _api
   const ref = api.child(`${type}stories`)
   const handler = snapshot => {
     if (first) {

components/ItemList.vue

@@ -44,12 +44,12 @@ export default {
     }
   },
 
-  beforeMount() {
+  async beforeMount() {
     if (this.$root._isMounted) {
       this.loadItems(this.page)
     }
     // watch the current list for realtime updates
-    this.unwatchList = watchList(this.type, ids => {
+    this.unwatchList = await watchList(this.type, ids => {
       this.$store.commit('SET_LIST', {type: this.type, ids})
       this.$store.dispatch('ENSURE_ACTIVE_ITEMS').then(() => {
         this.displayedItems = this.$store.getters.activeItems