SOURCE

var data={
   title:'The VueJS Instance',
    showParagraph:false,
};
Vue.component('hello',{
  template:'<h1>Hello!</h1>'
});

var vm1=new Vue({
  data:data,
  methods:{
    show:function(){
      this.showParagraph=true;
      this.updateTitle('The VueJS Instance (Updated)');
      this.$refs.myButton.innerText="Test";
    },
    updateTitle:function(title){
      this.title=title;
    },
  },
  computed:{
    lowercaseTitle:function(){
      return this.title.toLowerCase();
    }
  },
  watch:{
    title:function(value){
      alert('Title changed,now value: '+value);
    }
  }
});
vm1.$mount('#app1');
console.log(vm1.$data==data);
/*setTimeout(function(){
  vm1.title="Changed by Timer!";
  vm1.show();
},3000);*/
vm1.$refs.heading.innerText="Something else";
vm1.newProp="new";
console.log(vm1);

var vm2=new Vue({
  el:'#app2',
  data:{
    title:'The second Instance'
  },
  methods:{
    onChange:function(){
      vm1.title="Changed!";
    }
  }
  
});

var vm3=new Vue({
  template:'<h1>Hello!</h1>'
});
vm3.$mount();
document.getElementById('app3').appendChild(vm3.$el);

<script src="https://unpkg.com/vue@2.6.11/dist/vue.js">
</script>
<div id="app1">
  <h1 ref="heading">{{title}}</h1>
  <button @click="show" ref="myButton">Show Paragraph</button>
  <p v-if="showParagraph">This is not always visible</p>
</div>

<div id="app2">
  <h1>{{title}}</h1>
  <button @click="onChange">Change something in Vue 1</button>
  <hello></hello>
  <hello></hello>
</div>

<div id="app3">
  
</div>