invalid Firebase binding source when trying to use readyCallback with vuefire

Question

This is my first time using Vuefire. I want to render some data after the data is loaded using db.ref('page_data'). In the docs, I have read that you can use a function inside of firebase: {} to have a callback when its ready called readyCallback: function(){}

but for some weird reason when I use this firebase throws an error:

invalid Firebase binding source

My <script> tag looks like this

import { db } from "./firebase"

export default {
    name: 'App',
    firebase: { 
      data: db.ref('page_data'),
      readyCallback: function(){
        console.log("Ready!")
      }
    },
    data(){
        return{
            data: ui_data,
        }
    }
}

If i remove readyCallback no errors are shown, but the problem is that if i try to render the data before the request is finished the vue app errors out on me.

Answer 1

readyCallback should be nested inside:

 firebase: { 
  data: {
    source: db.ref('page_data'),
    readyCallback: function(){
      console.log("Ready!")
    }
  }
},