Vue.js: Sharing data between components with Vue.observable()

#vue #webdev #javascript

While I was working on a project, I found myself in a tricky situation.(You can find the project here)

I needed to find a way to share data between two components, but the data was to small to be stored in Vuex and passing it through the components would've cluttered things up.

After some research, I've found exactly what I was looking for: Vue.observable().

To put it simple, it makes an object reactive.
This can be used to our advantage: if the object that is shared between 2 components is modified by the component A, the changes will be reflected in component B(and vice versa).

A real use case

This is how a Dashboard component would look like:

As you can notice, the Dashboard consists of multiple cards: History, VAT, Documents.

Now, I'd kindly ask you to focus your attention on the History card.
The behaviour I expect is that every time the user clicks on a row, a modal will be opened and will show the proper information about that row.

My approach to this problem is to create two separate components, one which will display the rows and one which will contain the modal.

Here's the idea translated into code: