Vueインスタンスは複数作成することができる

• あまりこの様な使い方は使用しない方がいい。ロジックが複雑になってしまう為
• 要素が完全に独立した時には使用してもいい

<div id="app1">
	<p>{{ message }}</p>
</div>
<div id="app2">
	<p>{{ message }}</p>
</div>

new Vue({
    el: "#app1",
    data: {
        message: 'インスタンス１'
    }
});

new Vue({
    el: '#app2',
    data: {
        message: 'インスタンス２'
    }
})

外部からVueインスタンスにアクセスする時

• Vueインスタンスを変数に入れて、操作していく

<div id="app1">
	<p>{{ message }}</p>
</div>

<div id="app2">
  <p>{{ message }}</p>
  <button @click="changeMessage1">インスタンス１を変更するボタン</button>
			🔼別のVueインスタンスのデータプロパティを変更している
    </div>

let vm1 = new Vue({
    el: "#app1",
    data: {
        message: 'インスタンス１'
    }
});

let vm2 = new Vue({
    el: '#app2',
    data: {
        message: 'インスタンス２'
    },
    methods: {
        changeMessage1() {
            vm1.message = 'インスタンス２から変えました'
        }
    }
})

Vueインスタンスのデータプロパティに後付けした場合は、リアクティブに動かない

• Vueでデータプロパティの後付けしてはいけない原則がある

• Vueインスタンスのデータプロパティの動き

  1. インスタンスが作成された瞬間に、すべてのプロパティを見る
  2. データプロパティ一つ一つにgetter, setterが準備される。(監視プロパティが作成されるイメ＝じ)
  3. 何か値が変わった時にgetter, setterが動く(ウォッチャ)

  ➡️この為、後付けしたデータプロパティはウォッチャが存在しない為、リアクティブな動きにならない

リアクティブ システム におけるウォッチャとは、setter内つまりデータが変更された時に、実行する関数になります。逆に監視プロパティと言うものは、データが変更された時に何か処理を書きたい時に使います。そういう意味では、watcherの１つに監視プロパティで定義された関数も含む、というイメージで考えていただければ大丈夫です。

もっと詳しく知りたい場合は、少し複雑ですが、こちらの公式ドキュメントを参考にしてみてください。

let x = 1; let y = x; x = 10;

とした時のyは、どうなるかというと、1のままです。もう一度y = xとする必要があります。ただしVue.jsではsetterやgetter、watcherなどを使って、x = 10とした時に、自動的に、y = xを内部的に実行してくれるようになっているというイメージです。今回でいうと、DOMの再描画が、y = xにあたります。本来であれば、el = document.querySelector(); el.textContent = 'hello'のようなことを書いて、再描画する必要があるのですが、それらを全て内部的に行ってくれており、その処理を持った関数をwatcherと言います。