コンポーネントの際はdataは関数にする必要がある

関数にした場合

<script src="https://cdn.jsdelivr.net/npm/vue@2.6.12/dist/vue.js"></script>

<div id="app">
<my-component></my-component>
<my-component></my-component>
<my-component></my-component>
</div>

Vue.component('my-component',{
 data: function(){
   return {
     number: 12
   }
 },
 template: '<p>いいね({{number}})<button @click="increment">+1</button></p>',
 methods: {
  increment: function(){
    this.number+= 1;
      }
   }
})

new Vue({
 el: '#app',
})

それぞれの表示した項目が別のメモリを使っているためにそれぞれ個別に保存できる。

オブジェクトで無理やりコンポーネントに設定した場合。(return内の外部オブジェクトにする)

<script src="https://cdn.jsdelivr.net/npm/vue@2.6.12/dist/vue.js"></script>

<div id="app">
<my-component></my-component>
<my-component></my-component>
<my-component></my-component>
</div>

var data = {
  number: 12
}

Vue.component('my-component', {
  data: function() {
    return data
  },
  template: '<p>いいね({{number}})<button @click="increment">+1</button></p>',
  methods: {
    increment: function() {
      this.number += 1;
    }
  }
})

new Vue({
  el: '#app',
})

これで＋１ボタンを押すと

オブジェクトの場合は１つのメモリを共有することになるので＋１を押しても３つとも同時に１づつ増加して同じ数字で表示されてしまう。