Vue - Two views using common data

by Ben Clayton

HTML

<script src="https://unpkg.com/vue"></script>
<div id="div1">
  <h2>{{ msg }}</h2>
</div>


<div>
  OTHER HTML
</div>

<div id="div2">
  <h2>{{ msg }}</h2>
</div>

CSS

.interface {}

JavaScript

//---------------------------------------------------------

// the common data must be an object with a property which you are going to change.

var commonData = { msg:"Hello" };

var vm1 = new Vue({
  el: '#div1',
  data: commonData
});

var vm2 = new Vue({
  el: '#div2',
  data: commonData
});


setTimeout(function(){commonData.msg="... world"},5000);