<div class="sample" id="app">
  {{ message }}
</div>

<div id="app-2">
 <p>{{ message }}</p>
 <button v-on:click="reverseMessage">Reverse Message</button>
</div>

<div id="app-3">
 <p>{{ message }}</p>
 <input v-model="message">
</div>

<div id="app-4">
<ul>
  <fruit-item v-for="item in groceryList" v-bind:fruit="item"></fruit-item>
</ul>
</div>
div + div {
  margin-top:20px;
}

div {
  background-color: #f0f0f0;
  padding:10px;
  line-height:1.8;
}
View Compiled
var app = new Vue({
  el: '#app',
  data: {
    message: 'Hello Vue!'
  }
});

var app2 = new Vue({
  el: '#app-2',
  data: {
    message: 'Hello Vue.js!'
  },
  methods: {
    reverseMessage: function() {
      this.message = this.message.split('').reverse().join('');
    }
  }
});

const app3 = new Vue({
  el: '#app-3',
  data: {
    message: 'Hello Vue',
  }
})


Vue.component('fruit-item', {
  props: ['fruit'],
  template: '<li>{{ fruit.text }}</li>'
})
var app4 = new Vue ({
  el: '#app-4',
  data: {
    groceryList: [
      { text: 'apple'},
      { text: 'orange'},
      { text: 'blueberry'}
    ]
  }
})
Rerun