Is the solution for passing data up the chain in Vue.js really to chain event listeners/emitters?

Question

The Vue API Docs/Guide talk about the pattern of parents passing props to children, who communicate back up to their parents via events. Additionally, the guide stresses that ch

Answer 1

If you really want to keep state at app level, you can use non parent child communication

Which will be like following:

var bus = new Vue()
----------------------------
// in component A's method
bus.$emit('id-selected', 1)
----------------------------
// in component B's created hook
bus.$on('id-selected', function (id) {
  // ...
})

But as stated in documentation:

In more complex cases, you should consider employing a dedicated state-management pattern.

Vuex to the rescue

As suggested in the comments, the general practice in the community for centralise state management is vuex, so all your state is separated from your component and view, you have actions which changes the store, which reactively changes your view. Flow look like this: