How it works...

The secret sauce that makes the two components talk to each other is the line variable:

Each component will try to read the variable and update it. This is not exactly a good way to write code, but it demonstrates that you can use simple variables outside of regular Vue code to make your components communicate with the external world.

A more proper way to achieve the same goal would be to leverage the parent Vue instance to hold the same state and then pass it as a prop to the two children components. Now, the problem with this is that the two components are not allowed to modify the prop since the communication is one-way ...

Get Vue.js 2 Cookbook now with the O’Reilly learning platform.

O’Reilly members experience books, live events, courses curated by job role, and more from O’Reilly and nearly 200 top publishers.