We have created a lot of Vue instances in this course so far, but did you ever wonder if you could use multiple Vue instances on the same page? Indeed you can, as you can probably tell based on the below example.

<div id="vm1">
  <h1>{{ name }}</h1>
</div>

<div id="vm2">
  <button @click="showName">Show name</button>
</div>

var vm1 = new Vue({
	el: '#vm1',
	data: {
		name: 'Vue Instance #1'
	}
});

var vm2 = new Vue({
	el: '#vm2',
	methods: {
		showName: function() {
			alert("The name of the other Vue instance is: ");
		}
	}
});

setTimeout(function() {
	vm1.name = 'Hello from the other side!';
}, 2000);

I have slightly expanded on the example from the previous post and added a new Vue instance. This instance refers to an element within the template which simply contains a button which has a simple click event listener. This listener just displays an alert, which we can see if we click the button.

As you can see, we have successfully added two Vue instances to the same page, which operate on different parts of the DOM. This is very useful for adding widgets to a page, for instance. Perhaps one Vue instance would be responsible for a contact form on the right hand side of the page, and another would control the navigation menu.

But what if I want this alert to display the name of the other Vue instance, i.e. its data property?

I can use the same approach as in the previous post and simply refer to its name directly on the vm1 variable.

alert("The name of the other Vue instance is: " + vm1.name);

But wait a minute, is this approach really such a great idea? If you think about it, wouldn’t it be better if each Vue instance was self-contained and didn’t rely on other Vue instances? Sure, this would be ideal. Luckily Vue contains something called components, which we will talk about in details later in this series.

The reason I mention this, is just that I want to strongly discourage that you make use of an approach like the one I have just showed you. Even if you think it’s not a big problem at a small scale, it can quickly lead to code that is very hard to maintain. Because your Vue instances would no longer be isolated from each other, it can be very hard to figure out the dependencies between them, and changing something in one Vue instance could easily break another. We will take a look at a proper approach later in the course, but for now, I just want to recommend that you stay away from this approach.

That being said, it’s perfectly valid that you include multiple Vue instances on the same page – there is nothing wrong with that, as long as they are self-contained. Also note that it’s still fine to access Vue instances after they have been initialized, because this doesn’t break the principle of loose coupling, and they can therefore still be isolated from each other.

Now that we’ve seen how multiple Vue instances can easily be used on the same page, let’s dive deeper into how Vue.js proxies our data.