Vuefire is either not working or the "firebase" component property is not functioning.

I’m currently trying to create a simple firebase system for my website. This system will be used for a small forum and I set up a small testing page for vuefire and firebase. The full repo and all code (which is up to date) is here: https://github.com/ConnerFrancis/connerfrancis.github.io/tree/dev

I’ve installed firebase and vuefire with npm and the --save flag. Here are all files portaining to firebase and vuefire:

main.js

// The Vue build version to load with the `import` command
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
import '@/firebase'
import VueFire from 'vuefire'
import Vue from 'vue'
import App from './App'
import router from './router'

// init Firebase with Vue
Vue.use(VueFire)

Vue.config.productionTip = false

// init Vue
/* eslint-disable no-new */
new Vue({
  el: '#app',
  router,
  components: { App },
  template: '<App/>'
})

firebase.js

import firebase from 'firebase'

const app = firebase.initializeApp({
  apiKey: "AIzaSyA6SRssT6ut6rNLQvaLPs-4QNIsbt-mFsI",
  authDomain: "connet-702fc.firebaseapp.com",
  databaseURL: "https://connet-702fc.firebaseio.com",
  projectId: "connet-702fc",
  storageBucket: "connet-702fc.appspot.com",
  messagingSenderId: "437958455389"
})

const db = app.database()
export default db

pages/hidden/Firebase.vue

<template>
  
  <div id="firebase">
    users:
    {{ users }}
    {{ anUser }}
    <div v-for="user of users">
      {{ user.bio }}
    </div>
  </div>
  
</template>

<script>
  
  import db from '@/firebase'
  
  export default {
    name: 'Firebase',
    
    data () {
      return {
        users: {}
      }
    },
    
    firebase: {
      anUser: db.ref('users/first'), // this is a correct ref, i checked using my db browser and entering in this ref link
      
      users: {
        source: db.ref('users'),
        asObject: true,
        
        cancelCallback(err) {
          window.alert(err)
        }
      }
    }
  }
  
</script>

<style lang="scss" scoped>
  
  #firebase {
    background-color: $grey-lightest;
  }
  
</style>

When I navigate to the firebase testing page at localhost:8080/#/firebase, the users object is not populated and I get this error:

[Vue warn]: Property or method "anUser" is not defined on the instance but referenced during render. Make sure that this property is reactive, either in the data option, or for class-based components, by initializing the property. See: https://vuejs.org/v2/guide/reactivity.html#Declaring-Reactive-Properties.

found in

---> <Firebase> at src/pages/hidden/Firebase.vue
       <App> at src/App.vue
         <Root>

I’m not sure what I’m doing wrong here. Any help or ideas?

[ConnerFrancis]

Wow, you were right about the npm install 👌. I’m disappointed in myself to an extent, because I had installed the vuefire@next (I think that’s what it is) version rather than the default npm tag. Thank you so much, it’s working just fine now! 👍

To anyone else with this issue, do this: npm uninstall vuefire vuefire@next firebase --save npm install vuefire firebase --save

[posva]

Make sure you are using the RTDB version of vuefire (default npm tag). With that version, you don’t need to add users to data btw

Other than that I don’t see what is missing, I could take a look if you have a jsfiddle with minimal reproduction, otherwise it’s just too much