I have a Vue app, using vue-router and a few components rendered in x-templates. In one of those markup templates I have a < select > object. When I open this page in two separate tabs in the same browser session, changed selections in one tab in that is mirrored in the other tab. I first thought it was the data and methods, but then I added a completely vanilla < select > with a few < option > in it, no bindings, data, event handlers or anything - and it behaves the same! When I select an option in one tab, it selects the same in the other. It is the same for other < select > objects in the same app.
I can't explain it. What am I missing? Do I need to maintain sessions to avoid this? If so, how?
Edit: It is now apparent to me that all objects behave the same, and are mirrored between the sessions. This has to be by-design, but how do I do to separate it with a good pattern in Vue.js?