title: Cannot read property 'ref' of undefined
body: <p>I'm building a simple web app with Vue + Firebase + Vuefire and I get <strong>"Uncaught TypeError: Cannot read property 'ref' of undefined"</strong> when I try to use my Firebase db variable inside a component.</p>
  
  <h2>In main.js</h2>
  
  <pre><code>Vue.use(VueFire)
  
  const firebaseApp = Firebase.initializeApp({ //setting })
  
  // Export the database for components to use.
  export const db = firebaseApp.database()
  </code></pre>
  
  <h2>And in my component</h2>
  
  <pre><code>// in Recipes.vue
  import {db} from '../main.js'
  
  export default {
    recipe: {
      source: db.ref('recipes')
      // Console says: "Uncaught TypeError: Cannot read property 'ref' of undefined"
    }
  }
  </code></pre>
  
  <p>I followed the steps in this tutorial <a href="https://alligator.io/vuejs/vuefire-firebase/" rel="nofollow noreferrer">https://alligator.io/vuejs/vuefire-firebase/</a></p>
  
  <p>This code <code>db.ref('recipes')</code> works if used inside main.js, but it never works once I import it inside my component.</p>