<div id="app2">

</div>

new Vue({
    data: {
        name: 'いっせい'
    },
    template: '<h1>こんにちは、{{ name }}</h1>'
}).$mount('#app2')

NG Sample

<div class="app">

</div>
<div class="app">

</div>

new Vue({
    data: {
        number: 12
    },
    template: '<p>いいね({{ number }})</p>'
}).$mount('div')

🔼このように記述した場合は、片方のdivタグした反応しない為、以下のような結果になる

いいね(12)

➡️なので、使い回す時にはコンポーネント化して使い回すような使い方をする

OK Sample

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

Vue.component('my-component', {
    data(){
        return {
            number: 12
        }
    },
		🔼ここを関数にしないとデータプロパティを参照することができない
    template: '<p>いいね({{ number }})</p>'
})

new Vue({}).$mount('div')

なぜデータプロパティを関数にしないといけないのか