title: Where do I store shareable data in vuejs?
body: <p>I am building an app with various pages, and when users goes to <code>/orgs</code> I have a template that I require </p>
  
  <pre><code>// routes.js
  ...
  import Orgs from './components/Orgs.vue';
  ...
  
  {
    path: '/orgs',
    component: Orgs,
    meta: { requiresAuth: true }
  },
  </code></pre>
  
  <p>from here I have a simple template in <code>Orgs.vue</code> that looks like:</p>
  
  <pre><code>&lt;template lang="html"&gt;
    &lt;div&gt; {{orgs}} &lt;/div&gt;
  &lt;/template&gt;
  
  &lt;script&gt;
  export default {
     data(){
      return {
        orgs: [];
      }
     },
     created() {
       //use axios to fetch orgs 
        this.orgs = response.data.orgs;  
  
     }
  }
  &lt;/script&gt;
  </code></pre>
  
  <p>The problem is that if I want to show list of organizations in other pages, I am bound to duplicate the same code for other pages as well, but I am trying to find a solution that would call return organizations so I can use that in multiple page? </p>
  
  <p>What is the solution for this? </p>