Modify both input boxes and query string of the URL, to see how they keep in sync

/**************** Source Code ****************/
var App = {
  name: 'App',
  template: '#app-tpl',
  mixins: [VueSyncQuery.default],
  data: function () {
    return { a: 1, b: 2, c: 3, d: [4, 4, 4, 4], e: 5, f: 6, g: 7 };
  },
  mounted: function () {
    this.syncQuery('a');
    this.syncQuery(['b', 'c']);
    this.syncQuery({
      localField: 'd',
      queryField: 'dddd',
      local2query: function (v) {
        return v.join(',');
      },
      query2local: function (v) {
        // return falsy value meaning restore the default value
        return v ? v.split(',') : null;
      }
    });
    this.syncQuery([
      'e', // same as { localField: 'e', queryField: 'e' }
      { localField: 'f', queryField: 'ffffff' }
    ]);
    this.syncQuery({
      localField: 'g',
      queryField: 'ggggggg',
      local2query: { immediate: true }
    });
  }
};

new Vue({
  el: '#app',
  router: new VueRouter({ routes: [{ path: '/', component: App }] })
});
Vue.config.devtools = true;