How to connect instances in vue3?

Question

Vue.js

I started looking at the documentation for vue3. I did not quite understand how to connect two different instances. For example:

<div id="app">
    <h2>Первый инстанс</h2>
    <h2>{{ title }}</h2>
    <button @click="title = 'update title'">update title</button>
  </div>

  <hr>

  <div id="app2">
    <h2>Второй инстанс</h2>
    <h2>{{ title }}</h2>
    <button @click="updateFirstTitle">updateFirstTitle</button>
  </div>
  
  <script src="https://unpkg.com/[email protected]"></script>
  <script>

    const MyApp = Vue.createApp({
      data() {
        return {
          title: 'Hello I am Vue!',
        }
      },
    })

    const MyApp2 = Vue.createApp({
      data() {
        return {
          title: 'Hello from vue2!!!'
        }
      },
      methods: {
        updateFirstTitle() {
          MyApp.title = 'Update from second app'
          console.log('=====', MyApp)
        }
      }
    })
    
    MyApp.mount('#app') //новое создание инстанса
    MyApp2.mount('#app2') //новое создание инстанса
  </script>

there are two instances MyApp and MyApp2, by clicking on the button of the second instance I want to change the title of the first one. The MyApp.titile = 'New Value' construct does not work.

Answer 1

there are two instances MyApp and MyApp2

Instance of what? You need an instance of the root component, which is returned by the mount method.
UPD. Is this the behavior you tried to achieve ?