Vue.js 2.x with global store and reactive component data sync

This is a basic test to show how you can use a global object as your primary data store in Vue.js, and use a watcher to trigger a function that builds secondary data sets filtered from the primary source to update the display in the Vue instance (or component).

In this way you can share data between the Vue instance and components (via the global object) and work with the data specifically need by a component while still responding to changes in the global store (e.g. if the global data is updated via a service class or AJAX call).

If the embed below is not working then view it on CodePen at https://codepen.io/jsnelders/pen/dyoJPrw.

 

See the Pen
Vue.js with global store and component reactive sync test
by Jason (@jsnelders)
on CodePen.