2) 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 id="app2">
    <h1>"Hello world"</h1>
    <my-cmp></my-cmp>
    <my-cmp></my-cmp>
  </div>
</div>
<script>
  var data = {
    server_status: 'hattamana'
  }

  var cmp = {
    data: function() {
      return {
        server_status: 'hattamana'
      };
    },
    template: '<p>Server Status : {{ server_status }} <button @click="changeStatus">Change</button></p>',
    methods: {
      changeStatus: function() {
        this.server_status = 'Normal';
      }
    }
  };
  
  
  new Vue({
    el: '#app',
    components: {
      'my-cmp': cmp
    }
  });
  
  new Vue({
    el: '#app2',
    components: {
      'my-cmp': cmp
    }
  });

</script>