Vuejs observable test

HTML

<script src="https://cdn.jsdelivr.net/vue/latest/vue.js"></script>

<div id="main">
  <div class="controler_info">
      <p><b>controler_info:</b> 
          <button v-on:click="changePage">changePage</button>
          <button v-on:click="sendEvent">sendEvent</button>
          componentes:
          <select v-model="componente"  >
              <option v-for="item in gestor.components" value="{{item._uid}}">
                {{item._uid}}
              </option>
          </select>
      </p>
      <div>mounted: </div>
      <div>ID last mounted: {{gestor.lastMounted}}</div>
      <div>ID last unmounted: {{gestor.lastUnmounted}}</div>
      <div>call responses: {{gestor.counter}}</div>
    </div>
    
    <component :is="page"></component>
    <!--
    <componente  nom="c1" oye="c2"></componente>
    <componente  nom="c2" oye="c3"></componente>
    <componente  nom="c3" oye=""></componente>
    -->
</div>

<template id="componente">
  <div class="componente">
      <button v-on:click="actualizar">act</button>
    <button v-on:click="desmontar">unmount</button>
    <button v-on:click="pedir">call</button>
    <span>{{nom}} val:{{cont}} id:{{_uid}} {{oye?' oye:'+oye:''}} resp:{{response}}</span>
    </div>
</template>

<template id="page0">
  <div class="page">
    <componente  nom="c1" oye="c2"></componente>
    <componente  nom="c2" oye="c3"></componente>
    <componente  nom="c3" oye=""></componente>
  </div>
 </template>
<template id="page1">
  <div class="page">
    <componente  nom="c4" oye="c5"></componente>
    <componente  nom="c5" oye=""></componente>
    <componente  nom="c6" oye="c5"></componente>
  </div>
</template>
<template id="page2">
  <div class="page">
    <componente  nom="c7" oye=""></componente>
    <componente  nom="c8" oye=""></componente>
  </div>
</template>

CSS

html, body ,#main
{
    height: 100%;
    width: 100%;
    margin: 0px;
    padding: 0px;
    overflow: hidden;
    background:#888;
    font-family:Arial;
}

.app{
    display:block;
    width:100%;
}

.componente {
    display:inline-block;
    width:100%;
    background:turquoise;
}

JavaScript

/////// GESTOR DE COMUNICACIONES ///////
// detecta mount, unmount
// gestiona las llamadas
// gestiona las comunicaciones entre componentes.
var gestor=new Vue({
  data: {
    components:[],
    componente,
    lastUnmounted:'',
    lastMounted:'',
    counter:0
  },
  methods:{
    addComponent:function (obj) {
        this.components.push(obj);
        this.lastMounted=obj.getId();
    },
    removeComponent:function (obj) {
        this.components.splice(this.components.indexOf(obj),1);
        this.lastUnmounted=obj.getId();
    },
    sendEvent:function(id){
        var result = this.components.filter(function( obj ) { return obj._uid == id; });
        console.log("result:"+result)
      	if(result.length>0)result[0].$emit("newInfo",result[0].nom);
    }
  },
   events: {
    'component-created': function (obj) {
      console.log("G component-created",obj.getId())
      this.addComponent(obj);
    },
    'component-destroyed': function (obj) {
      console.log("G component-destroyed",obj.getId())
      this.removeComponent(obj);
    },
    'ajax-response': function(resp){
    		this.counter++;
    },
    'send-info':function(info){
    	console.log("send-info "+info.obj.getId());
      console.log("SEND by:"+info.obj.nom+" datos:"+info.datos);
        for(var i=0;i<this.components.length;i++){
            if(this.components[i].oye==info.obj.nom){
                console.log("LISTEN by:"+this.components[i].nom);
                 this.components[i].$emit("newInfo",info.obj.nom);
            }
        }
    }
  }
});


////// COMPONENT_MIXIN ////////////////
// En todos los componentes principales
// Añade metodos: getId, sendInfo, call 
var componentMixin = {
  created: function () { //Se ejecuta al crearse el objeto
    this.gestor=gestor;
    this.gestor.$emit('component-created', this)
  },
  beforeDestroy:function(){
    this.gestor.$emit('component-destroyed', this)
  },
  methods: {
    getId: function () {
      return this._uid;
    },
   ...