title: Recommended strategy to sync vuex state with server
body: <p>Imagine this simple case. You have a Vue JS application in which users can create lists of tasks and sort them. These lists should be stored in a database by the server. Let's assume we have a <code>ListComponent</code> which does the bulk of the UX.</p>
  <p>My question is, which pattern should I use to handle front-end and back-end data synchronisation?</p>
  <p>A) <strong>Go through vuex</strong>: Store the active lists (those being shown, edited or created) in the vuex <code>store</code>. The <code>ListComponent</code> will change the <code>store</code> and <em>then</em>, the changes made to a list will be sent to the backend through an API.</p>
  <p>B) <strong>Go directly to the server</strong>: Read and write directly from the <code>ListComponent</code> to the server every time a list is shown, edited or created.</p>
  <p>If following A, what architecture should the store have? How and when should I kick a synchronisation? How can I keep track of what has changed and what has not?</p>