title: Vue.js Passing Data via httpVueLoader
body: <p>I have a Vue instance.</p>
  
  <pre><code>var myApp = new Vue({
      el: '#my-App',
      data: {
          user: sessionStorage.getItem('user')
      },
      components: {
          'header-component': httpVueLoader('./components/header-component.vue'),
          'footer-component': httpVueLoader('./components/footer-component.vue')
      }
  });
  </code></pre>
  
  <p>And a single file component <code>header-component</code></p>
  
  <pre><code>&lt;template&gt;
      &lt;li v-if="user !== ''" class="nav-item"&gt;
          &lt;a class="nav-link" v-on:click="openProfilePage" href="#"&gt;{{user}}&lt;/a&gt;
      &lt;/li&gt;
  &lt;/template&gt;
  
  &lt;script&gt;
      module.exports = {
          data: function () {
              return {}
          },
          props: ['user'],
          methods:
              {
                  openProfilePage: function () {
                      if (userName !== '') {
                          myApp.page = 'profile';
                          sessionStorage.setItem('page', 'profile');
                          page = 'profile';
                      }
                      else {
                          myApp.page = 'login';
                          sessionStorage.setItem('page', 'login');
                          page = 'login';
                      }
                  }
              }
      }
  &lt;/script&gt;
  </code></pre>
  
  <p>I don't want to define a new data.user in my single file component and i want to use the data.user of the vue instance. How can i do that? How can i pass this data?</p>