Vue.js for Beginners

A set of bit sized tutorial for people interested in learning Vue.js
    var app = new Vue({
      el: '#app',
      data: {
        message: 'Hello Vue!'
      }
    })
    
    setTimeout(function(){
        app.message = 'CHANGED'
    }, 2000)
    var app = new Vue({
      el: '#app',
      data: {
        disableButton: true
      }
    })
    
    setTimeout(function(){
      app.disableButton = false
    }, 2000)
    var app = new Vue({
      el: '#app',
      data: {
        yolo: true
      }
    })
    
    setTimeout(function(){
        app.yolo = false
    }, 2000)
    
    
    
    
    <div id="app">
      <ol>
        <li v-for="todo in todos">
          {{ todo.text }}
        </li>
      </ol>
    </div>
    var app = new Vue({
      el: '#app',
      data: {
        message: 'Hello Vue.js!'
      },
      methods: {
        reverseMessage: function () {
          this.message = this.message.split('').reverse().join('')
        }
      }
    })
    <div id="app">
      <p>{{ message }}</p>
      <input type="checkbox" v-model="message">
    </div>
    Vue.component('my-component', {
      template: '<div>This is a Vue.js component!</div>'
    })
    
    new Vue({
        el: '#app'
    })
    
    
    
    <div id="app">
          <my-component :message="msg"></my-component>
    </div>
    Vue.component('my-component', {
      template: `
        <div>
          <div> {{ message }} </div>
          <button @click="handleMessageChange">Click to change mes
        </div>
      `,
      data: function() {
        return {
          message: 'Hello from Vue data!'
        }
      },
      methods: {
        handleMessageChange: function(){