VueJS: observer object instead of Array

Question

I have this small one page VueJS app which uses Firebase. The problem I am currently facing is when I try to retrieve a collection from Firebase in a component. Instead of returning an array, the vue instance returns an observer object, more precisely [__ob__: Observer]. I understand that Vue JS uses this object to do its magic, what I don't understand is what am I supposed to do to get the actual array. I cannot do anything with that object, can't iterate it. I tried any lifecycle method to try and do it, but no luck. What is weirder is that when I close and open again the Chrome console (F12), the methods get called again and the object is actually resolved into the array. I initially thought that the data may not be retrieved yet, but the data is present in the object itself, I just can't access it.

Here's my code:

Vue instance:

new Vue({
  el: '#app',
  firebase: {
    orders: firebase.database.ref('orders').orderByChild('created_at'),
    members: firebase.database.ref('members').orderByChild('created_at')
  },
  router,
  template: '<App/>',
  components: { App }
})

Component code:

export default {
  data () {
    return {
      'member': null
    }
  },
  computed: {
    isMemberLoaded: function () {
      this.member !== null
    }
  },
  mounted: function () {
    console.log('mounted')
    this.init()
    console.log(this.$root.members) // [__ob__: Observer]
  },
  created: function () {
    console.log('created')
    console.log(this.$root.members) // [__ob__: Observer]
  },
  updated: function () {
    console.log('updated')
    console.log(this.$root.members) // [__ob__: Observer]
  },
  methods: {
    init: function () {
      console.log('init')
      console.log(this.$root.members) // [__ob__: Observer]
    }
  }
}

The observer object looks like this:

[__ob__: Observer]
    0:
      .key:(...)
      code:(...)
      created_at:(...)
      email:(...)
      name:(...)
      __ob__:Observer {value: {…}, dep: Dep, vmCount: 0}
      get .key: ƒ reactiveGetter()
      set .key: ƒ reactiveSetter(newVal)
      get code: ƒ reactiveGetter()
      set code: ƒ reactiveSetter(newVal)
      get created_at: ƒ reactiveGetter()
      set created_at: ƒ reactiveSetter(newVal)
      get email: ƒ reactiveGetter()
      set email: ƒ reactiveSetter(newVal)
      get name: ƒ reactiveGetter()
      set name: ƒ reactiveSetter(newVal)
      __proto__: Object
      length: 1
    __ob__: Observer {value: Array(1), dep: Dep, vmCount: 0}
    __proto__: Array

What am I missing here?

Answer 1

Simply do:

var parsedObj = JSON.parse(JSON.stringify(this.$root.members))
console.log(parsedObj)

It will convert the [ob: Observer] to its value