環境

実装したい内容

複数のアプリケーションインスタンスが共存する際、別インスタンスから別のインスタンスを操作したい。

具体的な状況

jsファイルに2つの異なるアプリケーションインスタンス（app1とapp2）が共存する。

const app1 = Vue.createApp({
  data: () => ({
    message: 'instance1'
  }),
  methods: {
  }
})
app1.mount('#app1')

const app2 = Vue.createApp({
  data: () => ({
    message: 'instance2'
  }),
  methods: {
    changeMessage1: function() {
      app1.message = 'changed from instance2'
    }
  }
})
app2.mount('#app2')

app2のmethodsにchangeMessage1関数メソッドを設置し、app2からapp1のmessageを書き換えるような操作を行う。

<body>
  <div id="app1">
    {{message}}
  </div>
  <div id="app2">
    {{message}}
    <button @click="changeMessage1">change message</button>
  </div>
  <script src="https://unpkg.com/vue@3.1.5/dist/vue.global.js"></script>
  <script src="js/hogehoge.js"></script>
</body>

↑[change message]ボタンを押すことで、instance1という文字列を変更したい。。
が、このままではできない！

直し方

jsファイルを以下のように修正します。

const app1 = Vue.createApp({
  data: () => ({
    message: 'instance1'
  }),
  methods: {
  }
}).mount('#app1')
//------------------
//直接、mountさせる！！
//------------------
const app2 = Vue.createApp({
  data: () => ({
    message: 'instance2'
  }),
  methods: {
    changeMessage1: function() {
      app1.message = 'changed from instance2'
    }
  }
}).mount('#app2')

const app1 = ~
app1.mount('#app1')

と書いていた部分を↓

const app1 = ~.mount('#app1')

のように変更しました。すると、狙い通りに↓

[change message]ボタンを押すことで、"instance1"から"changed from instance2"とメッセージが変更されました！！

教訓

const app1 = ~
app1.mount('#app1')

これと

const app1 = ~.mount('#app1')

これでは、返り値が異なるためにうまく動かなかったぽいですね。