1) Vue Component in the same EL

How to create a new component and use it in different places.

by shamaleyte

HTML

<script src="https://cdn.jsdelivr.net/npm/[email protected]"></script>
<div class="vue-test">
  <h2>TEST VUE</h2>
  <div id="app">
    <h1>"Hello world"</h1>
    <my-cmp></my-cmp>
    <my-cmp></my-cmp>
  </div>

</div>
<script>
  var data = {
    server_status: 'hattamana'
  }
  // The component setup has its own data creation as a function as you can see. It is not like the original Vue object creating a JSON object immeditely. This time, we simply create a function returning a JSON instead.
  Vue.component('my-cmp', {
    data: function() {
      return {
        server_status: 'hattamana'
      };
      //return data; Eger boyle yaparsak, global data'ya bağlanmıs olur her bir vue objesi. Yani eventler falan da dahil, tek bir data objesine bağlı olur. Dolayısıyla, butona bastıgında tüm objeler update olur. Bunun onune gecmek icin data objesini VUE objesine specific bir şekilde yarattık. 
    },
    template: '<p>Server Status : {{ server_status }} <button @click="changeStatus">Change</button></p>',
    methods: {
      changeStatus: function() {
        this.server_status = 'Normal';
      }
    }
  });
  new Vue({
    el: '#app'
  });

</script>