Cannot render multiple components in Vue

Question

I'm just starting with Vue and I have defined 2 components, however, I cannot render them in the same 'Vue' instance.

Here are my 2 components:

Vue.component('mat-example', {
  data: function () {
    return {
      count: 0
    }
  },
  template: '<button v-on:click="count++">You clicked me {{ count }} times.</button>'
})

Vue.component('button-counter', {
  data: function () {
    return {
      count: 0
    }
  },
  template: '<button v-on:click="count++">You clicked me {{ count }} times.</button>'
})

Next, I do have the 'Vue' entry point defined:

var app = new Vue({
  el: '#app'
});

And in my HTML, I do have the following code:

<div id="app">
    <button-counter />
    <mat-example />
</div>

The 'Vue' development tools does only show the 'button-counter' component:

If I remove the 'button-counter', the 'mat-example' is showed up in the Vue Developer Tools.

How does it come that I cannot render those 2 components in my Vue entry point?

Answer 1

this is going to work:

<div id="app">
    <button-counter></button-counter>
    <mat-example></mat-example>
</div>

demo:

  Vue.component('mat-example', {
    data: function() {
      return {
        count: 0
      }
    },
    template:
      '<button v-on:click="count++">You clicked me {{ count }} times.</button>'
  })

  Vue.component('button-counter', {
    data: function() {
      return {
        count: 0
      }
    },
    template:
      '<button v-on:click="count++">You clicked me {{ count }} times</button>'
  })

  var app = new Vue({
    el: '#app'
  })

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js"></script>
    <div id="app">
        <button-counter></button-counter>
        <mat-example></mat-example>
    </div>