여러개의 Vue 인스턴스 사용하기

html

<div id="app">
      {{name}}<br />
      <button @click="changeText">Click</button>
    </div>
    <div id="app-1">
      {{name}}<br />
      <button @click="changeText">Click</button>
    </div>

js

const app = new Vue({
        el: '#app',
        data: {
          name: '권기현'
        },
        methods: {
          changeText() {
            app1.name = '권기현 업데이트';
          }
        }
      });

      const app1 = new Vue({
        el: '#app-1',
        data: {
          name: '정다솔'
        },
        methods: {
          changeText() {
            app.name = '정다솔 업데이트';
          }
        }
      });

간단히 설명하자면,
"권기현" 밑의 버튼을 클릭하면 => "정다솔"이 "권기현 업데이트" 로 바뀌고,
"정다솔" 밑의 버튼을 클릭하면 => "권기현"이 "정다솔 업데이트" 로 바뀐다.

위의 로직을 위해서는 각자 다른 인스턴스의 data를 참조해야한다.

그러기위해서 각 인스턴스를 변수에 담아주고(정의하고) method에서 Vue인스턴스가 담긴 변수를 활용하여 각 인스턴스에서 서로의 값을 바꿀 수 있게 하였다.

-> this는 new Vue를 가르키는데, new Vue를 "const 변수"에 담아주므로써 this 대신에 변수명을 써줄 수 있다.