Scenario solution

There shouldn’t be an issue here with data scope because the reference to the data is all done inside the ‘HotelTool’ instance.

Don’t forget that ‘data’ is a function that returns an object in Vue:

data() {
   return {
       counter: 0
   }
},
methods: {
   add() { this.counter++; }
}

Please also update your @click event to fire passively by replacing the .native with .passive:

<v-btn @click.passive="add">Add counter</v-btn>

Splitpanes Reactivity

Splitpanes documentation claims to disable or block reactivity by default on their website. You can add the watch-slots element to restore reactivity.

<splitpanes watch-slots class="default-theme" horizontal>
....

General answer: Passing data between Vue instances

As a more general answer for future readers asking the same question, sharing data between instances in Vue can be achieved by:

Passing to props and emitting with events (recommended):
VueJS.org Props and,
VueJS.org Custom Events

A global data ‘store’:
Vuex Guide

I would recommend getting used to the first option, as this is recommended in the Vue documentation and adequate for most scenarios. The Vuex approach starts to become useful for larger applications.

Tip: Vue’s console errors are pretty useful and often the first place to look for errors involving scope. They also offer a Chrome extension to help give visibility of your applications state in real time.