title: What is the best practice to get the required data into VueJS component?
body: <p>I'm building my first VueJS application which is intended to be used by hundreds of people in the future. I tried to make the individual components reusable and indpendent as possible. To achieve this i decided to let every component fetch its required data themselves. This works fine but i'm not sure if its best practice. I could also pass the data between the components or even using the 2-way data binding functionality.</p>
  <p>The sketch bellow describes one of the situations i have. Note that <code>1 account has 1..* users</code>. As you can see i need to fetch the <code>accounts</code> to display them in the <code>accountOverviewComponent</code>.</p>
  <ol>
  <li><strong>Currently</strong> i only fetch the <code>accounts</code> in the <code>accountOverviewComponent</code> and fetch the users when the <code>account edit button</code> by the passed <code>accountId</code> in the <code>accountOverviewComponent</code> is clicked. This way i don't fetch data i don't need at the time.</li>
  <li>I can also include the <code>users</code> (god knows which data/relations will be added in future) to the <code>fetch account</code> response as wel so i can pass all required data to the <code>accountShowComponent</code> when a <code>account edit button</code> is clicked. This way i can save requests to the server with the side note that i fetch <code>users</code> of <code>accounts</code> i dont need. A possible disadvantage is that the <code>account</code> is updated in the <code>accountShowComponent</code> and not in the <code>accountOverviewComponent</code> (for example when the <code>accountShowComponent</code> is a <code>modal</code> on top of the <code>accountOverviewComponent</code>. So i need to pass the updatet <code>account</code> back or re-fetch the accounts after a save or something.</li>
  <li>As third option I can do the same in option 2 but than with the 2-way data binding which handles the data synchronization between the components. This will probably restrict the usage of the <code>accountShowComponent</code> to cases where the <code>accountShowComponent</code> is used &quot;on top&quot; of a parent which contains the data.</li>
  <li>I can also store the data in a <code>Vuex</code> store and update the stores all the time. I read that this is bad practive as it should be only used for data which is required accros the SPA. I think <code>Vuex</code> is overkill in &quot;simple&quot; situations like this?
  <a href="https://i.stack.imgur.com/ROdFg.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/ROdFg.png" alt="enter image description here" /></a></li>
  </ol>
  <p>What is the best practice of the described situation? I have a bunch of comparable situations/scenarios in my application. Performance (also for mobile devices), scalability and being &quot;future proof&quot; (extendability/modularity) are important for me. Can someone help me out because i'm a bit lost in the options i have?</p>
  <hr />
  <p><strong>UPDATE</strong></p>
  <p>The reason i think Vue is overkill is comming from <a href="https://markus.oberlehner.net/blog/should-i-store-this-data-in-vuex/" rel="nofollow noreferrer">this</a> article which makes totally sense from a software engineer perspective to me (i may be wrong). As my components have a kind of &quot;parent - child&quot; relation so i can solve my &quot;issue&quot; easily with passing data (or use 2-way data binding) and callback-events.</p>
  <blockquote>
  <p>The number one use case for storing data in a centralized store like Vuex, is, because the data must be accessible in multiple places of your application, by components which oftentimes are not related in any way (they neither are parents or children of each other). An example of this would be certain user settings to configure how your application looks or what date format should be used, to name a concrete example.</p>
  </blockquote>