Recommended strategy to sync vuex state with server : <p>Immagine 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 synchronization?</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, which architecture should the store have? how and when should I kick a synchronization? How can I keep track of what has changed and what has not?</p>
