Managing data between pagination table and row details drawer

This is my first VUE project and i’m having difficulties figuring out how and where to store my data on a “list users” page with a user details drawer.

The user table is paginated from the server and data is stored in the root of the page. When a row is clicked I copy the row data to a VUEX store and opens a user details drawer which takes its data from the store. Clicking on details in the drawer opens forms from where it is possible to change the data. When data change it’s committed back to the server and updated in the store. However my table does not change as there is no binding between the data in the table and in the drawer / store.

I’m afraid that I did it all wrong, but I can’t figure out what a better way would be.

Can someone give me a better approach to manage the data so that I have binding all the way from table to drawer. Just to add to the complexity… I don’t wan’t the drawer to disappear when I switch pages on the table. Meaning that the drawer can’t just show the data from the same place where the table gets it because that data will chance when changing page. That is why I make a copy of the row data before showing the drawer.

It depends where your table gets its data from. Lets call it the table-data-source, $tbc.

What you need is the drawer and the table to have both access to the $tbc and it being reactive.
E.g. if the table component and the drawer component have a common parent this parent could have $tbc in it’s data set and allow a 2-way relationship to it via params/events or a provide/inject setup.
Or you have a VUEX store, that holds the data and allows mutating it “byRow”.

And when you send the new row-data to the server you can then also push the same updated row into $tbc as well (and revert it instantly back again in case the server request failes).