title: How to share data across routed components in Vue.js using webpack?
body: <p>So I'm trying to wrap my head around how to use the <code>vue-loader</code> for Webpack, <code>vue-router</code> for routes, and how to have a shared data model. My understanding is that you create a data model, and then pass it into each component with the idea that they have a shared state. It also seems that you should use the data model rather than props, as that allows for two-way binding.</p>
  
  <p>I've tried a few things but nothing seems to work. I tried passing the <code>data</code> through in the router, but that doesn't fix it.</p>
  
  <p>I have this as my main <code>app.js</code>:</p>
  
  <pre><code>var $ = require('jquery'),
      Vue = require('vue'),
      VueRouter = require('vue-router');
  
  Vue.use(VueRouter);
  
  var first = require('vue!./first.vue');
  var second = require('vue!./second.vue');
  
  var sourceOfTruth = {
      msg: "my message"
  };
  
  var App = new Vue({
    data: sourceOfTruth,
  });
  
  var router = new VueRouter({
      history: true
  });
  
  router.map({
      '/foo': {
          data: sourceOfTruth,
          component: first
      },
      '/bar': {
          data: sourceOfTruth,
          component: second
      }
  });
  
  router.start(App, '#app');
  </code></pre>
  
  <p>And this as my <code>first.vue</code>:</p>
  
  <pre><code>&lt;template&gt;
      The message goes here -&gt; {{ msg }}
  &lt;/template&gt;
  
  &lt;script type="text/javascript"&gt;
      // ???
  &lt;/script&gt;
  </code></pre>
  
  <p>Any ideas? Thanks!</p>