text: "use strict";
  
  var app = new Vue({
    el: "#app",
    data: {
      message: "Hello there! Welcome to Vue!",
    },
  });
  
  var app2 = new Vue({
    el: "#app-2",
    data: {
      message: "What's the date you say? " + new Date().toLocaleString(),
    },
  });
  
  var app3 = new Vue({
    el: "#app-3",
    data: {
      seen: true,
    },
  });
  
  var app4 = new Vue({
    el: "#app-4",
    data: {
      todos: [
        {text: "Milk"},
        {text: "Eggs"},
      ],
    },
  });
  
  var app5 = new Vue({
    el: "#app-5",
    data: {
      message: "Hello Vue.js!",
    },
    methods: {
      reverseMessage: function () {
        this.message = this.message.split("").reverse().join("");
      },
    }
  });
  
  var app6 = new Vue({
    el: "#app-6",
    data: {
      message: "Hello Vue!",
    },
  });
  
  Vue.component("todo-item", {
    props: ["todo"],
    template: "<li>{{ todo.text }}</li>",
  });
  
  var app7 = new Vue({
    el: "#app-7",
    data: {
      groceryList: [
        { id: 0, text: 'Vegetables' },
        { id: 1, text: 'Cheese' },
        { id: 2, text: 'Other stuff' },
      ],
    },
  });
  