title: Simple Vue Component doesn't work on first div, only on second div
body: <p>I'm currently trying to learn basic vue.js component. These are my codes</p>
  
  <p>chat.blade.php</p>
  
  <pre><code>@extends('layouts.app')
  
  @section('content')
      &lt;div class="container"&gt;
          &lt;div class="row"&gt;
              &lt;div class="col-md-3"&gt;
                  &lt;div id="components-demo"&gt;
                      &lt;div class="card"&gt;
                          &lt;div class="card-header"&gt;Users&lt;/div&gt;
                          &lt;div class="card-body"&gt;
                              &lt;ul class="list-group list-group-flush"&gt;
                                  &lt;button-counter&gt;&lt;/button-counter&gt;
                              &lt;/ul&gt;
                          &lt;/div&gt;
                      &lt;/div&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
              &lt;div id="chat-component" class="col-md-9"&gt;
                  {{--&lt;chat-component v-bind:auth-user="{{$user}}" v-bind:other-user="{{ $otherUser }}"&gt;&lt;/chat-component&gt;--}}
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  @endsection
  @section('js')
      &lt;script&gt;
      &lt;/script&gt;
  @endsection
  </code></pre>
  
  <p>app.js</p>
  
  <pre><code>require('./bootstrap')
  
  window.Vue = require('vue')
  
  
  // const files = require.context('./', true, /\.vue$/i)
  // files.keys().map(key =&gt; Vue.component(key.split('/').pop().split('.')[0], files(key).default))
  
  Vue.component(
      'chat-component',
      require('./components/ChatComponent.vue').default
  );
  Vue.component('button-counter', {
    data: function () {
      return {
        count: 0
      }
    },
    template: '&lt;button v-on:click="count++"&gt;You clicked me {{ count }} times.&lt;/button&gt;'
  });
  
  
  const app = new Vue({
    el: '#app'
  });
  new Vue({ el: '#components-demo' });
  </code></pre>
  
  <p>The problem is when i try to click the button, the count is not working. But if I add another same component div with the same id, it works for the button in the second div. </p>
  
  <pre><code>        &lt;div class="col-md-3"&gt;
              &lt;div id="components-demo"&gt;
                  &lt;div class="card"&gt;
                      &lt;div class="card-header"&gt;Users&lt;/div&gt;
                      &lt;div class="card-body"&gt;
                          &lt;ul class="list-group list-group-flush"&gt;
                              &lt;button-counter&gt;&lt;/button-counter&gt;
                          &lt;/ul&gt;
                      &lt;/div&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
              &lt;div id="components-demo"&gt;
                  &lt;div class="card"&gt;
                      &lt;div class="card-header"&gt;Users&lt;/div&gt;
                      &lt;div class="card-body"&gt;
                          &lt;ul class="list-group list-group-flush"&gt;
                              &lt;button-counter&gt;&lt;/button-counter&gt;
                          &lt;/ul&gt;
                      &lt;/div&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
          &lt;/div&gt;
  </code></pre>
  
  <p><a href="https://i.stack.imgur.com/dknrO.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/dknrO.png" alt="enter image description here"></a></p>
  
  <p>Why is it only working on the 2nd div? Is there something that I'm missing? Thanks in advance.</p>