Vuex, what is the best way to use state in a task application?

Question

Vue.js

I know that stores are used to store data that is needed in more than one component. For example, user authentication or application theme. But after googling the implementation of all sorts of examples, people shove entire posts into the state, for example, and save it all in localStorage.
To understand vuex in practice, I decided to write an application a la trello, with draggable tasks (using vuedraggable), but based on the examples I saw, it turns out that I have to store a board array in the store, which also contains columns with tasks. That's a bunch of data. Plus, given the dragging of tasks between columns, all this is updated.
Can you please explain what is the best way to do this?
There was an idea to save in the store only during the session, if you left - clear the store and upload to the database, entered - loaded from the database and again to the state. But something doesn't seem right to me.
And if you fasten the sockets so that there is a real-time, then it turns out for anyone you need to store everything in the store and write it to localStorage, or I don’t understand something.