TL;DR;
Los objetos no son reactivos en vue per se, necesitas avisarle a vue que un objeto cambio para que sea reactivo. Hay que setear el objeto usando set o Object.assign
Problemas en la deteccion de cambios
Las propiedades de los objetos no se comportan como uno espera. Los cambios en las mismas no provocan que vue reaccione a los cambios como uno espera.
Cuando uno cambia un objeto:
miobjeto.prop1 = nuevovalor
Uno esperaria que si eso se muestra en la vista
<div>
{{miobjeto.prop1}}
</div>
la misma cambie. Pero ello no ocurre.
Esto se debe, a que las propiedades del objeto en si no son reactivas, porque al inicializar el mismo, vue creo un wacth para detectar cambios en el objeto, no en las propiedades del mismo.
Por lo tanto, cambiar propiedades no surge el efecto esperado, a menos que se usen los metodos recomendades por vue para que los mismos sean detectados.
Estos metodos se pueden usar tanto para cambiar los valores del objeto, como para tambien agregar nuevas propiedas.
- Cambiar el objeto totalmente
Se puede hacer que el objeto reaccione, si se hace un nuevo objeto y se lo asigna al viejo:
miobjeto = minuevoobjeto;
- Usar set
Se puede usar el metodo Vue.Set para agregar propiedades al mismo
Vue.set(vm.miobjeto, 'nuevaprop', nuevovalor);
Tambien se puede usar this.$set que es un alias global para el metodo anterior.
- Usar Object.assign
Si se desea modificar una o mas propiedades, se puede usar este metodo para que se encargue de comparar los objetos y devolver uno nuevo con las propiedades cambiadas.
this.miobjeto = Object.assign({}, this.miobjeto, { prop1: 1, prop2: 2 })
Usando alguno de los metodos descriptos arriba, provoca que el objeto sea tomado por los watch de vue, y reaccione como corresponde en todos los casos.