Explain in USAGE section that bindings don't get updated if properties update

Section in README

Usage

var firebaseApp = firebase.initializeApp({ ... })
var db = firebaseApp.database()

var vm = new Vue({
  el: '#demo',
  firebase: {
    // simple syntax, bind as an array by default
    anArray: db.ref('url/to/my/collection'),
    // can also bind to a query
    // anArray: db.ref('url/to/my/collection').limitToLast(25)
    // full syntax
    anObject: {
      source: db.ref('url/to/my/object'),
      // optionally bind as an object
      asObject: true,
      // optionally provide the cancelCallback
      cancelCallback: function () {},
      // this is called once the data has been retrieved from firebase
      readyCallback: function () {}
    }
  }
})

If you need to access properties from the Vue instance, use the function syntax:

var vm = new Vue({
  el: '#demo',
  firebase: function () {
    return {
      anArray: db.ref('url/to/my/collection')
    }
  }
})

Problems with description

You can access properties from Vue instance, but bindings won't get updated when the used properties get updated. The firebase function only gets called one time at initialization.

Solutions

Are there any problems with rebinding at property update? I may try to implement it myself and create a pull request afterwards. Despite implementing it, this issue should be mentioned in README.

[posva]

Are there any problems with rebinding at property update? I may try to implement it myself and create a pull request afterwards.

The current behaviour is intended. If you want updates, use a watcher

[johnyluyte]

If you need to access properties from the Vue instance, use the function syntax:

I'm sorry, but what does this line mean?

What is the difference between a non-function syntax and a function syntax here?

firebase: {
}

firebase (){
    return {}
}

I thought I can access properties from the Vue instance with both syntax? Or am I mistaking something?

English is not my first language so a simple code example would be very helpful. Thanks you!

The non-functional syntax gets executed way earlier than the other one. As soon as you import your file containing the component, the code inside firebase: {} gets executed (like all other parts of your component-config-object). The firebase function gets called when the component is initialized (see vue lifecycle)

[posva]

And therefore, the function syntax gives you access to this

Why isn't it intended to rebind on dependency update like in computed properties?

[posva]

because there's no tracking system like in computed properties and because if you want that, you have to explicitly use some kind of watching ($watch or computed)

[johnyluyte]

Thanks for the explanation, I get the concept now.

But I have another stupid question. What is the difference between "using function syntax" and "using $bindAsObject/Array in Vue lifecycles" ?

export default {
  name: 'hello',
  data() {
    return {
      myPath: `/data/banana`
    }
  },
  firebase: {
    myObj: {
      source: db.ref(this.myPath),   // CANNOT get "this"
    }
  },
  firebase() {
    return {
      myObj: {
        source: db.ref(this.myPath)   // CAN get "this"
      } 
    }
  },
  created() {
    this.$bindAsObject('myObj', db.ref(this.myPath))  // CAN also get "this"
  },

For example, the firebase() and created() both works here. Except for their executed order, when should I use one over the other?

Thanks.

[posva]

$bind* is on demand while the function syntax happens once