Vue - Múltiples Instancias

Las instancias múltiples permiten tener mas de una instancia de vue en el mismo archivo JS permitiéndonos aplicar diferentes bloques de lógica en la pagina.

De igual forma se puede interactuar entre las múltiples instancias, es por eso que es necesario colocar la instancia de vue en una variable

1
2
3
4
5
6
7
8
9

<p class="comentario">Instancia Uno</p>
<div id="vue-uno">
  {{titulo}}
</div>
<p class="comentario">Instancia Dos</p>
<div id="vue-dos">
  {{ titulo }} - {{ otroTexto }}
</div>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

var uno = new Vue({
  el: '#vue-uno',
  data: {
    titulo: 'Titulo uno',
    texto: 'Texto proveniente de uno'
  }
});
var dos = new Vue({
  el: '#vue-dos',
  data: {
    titulo: 'Titulo dos',
    otroTexto: uno.texto
  }
});

Resultado: