Tengo una propiedad calculada basada en algunas propiedades de objetos anidados. Cuando se cambia el objeto, la propiedad calculada parece actualizarse (en vue-dev-tools), pero el cambio no se refleja en la interfaz de usuario. Soy consciente de la reactividad de los objetos anidados, pero nunca cambio/asigno una propiedad anidada de mi objeto de order , la única vez que cambia es en updateOrder() (que asigna el objeto en el nivel raíz.

¿Hay algún motivo por el que mi interfaz de usuario no se actualice? ¿Las herramientas de desarrollo están sincronizadas con el mismo estado que la interfaz de usuario? ¿Me estoy perdiendo algo sobre el sistema de reactividad de Vue?

Aquí hay un código muy simplificado:

 <template> <my-component @order-changed="updateOrder" /> <div v-if="isOrderComplete"> Your order is complete // this never shows until I refresh page </div> <div v-else> Please Submit the order // this shows at first </div> </template> export default { props: function(){ initialOrder: Object, }, data: function(){ order: this.initialOrder }, methods: { updateOrder: function(newOrder){ // gets triggered by a child component this.order = newOrder; } }, computed: { isOrderComplete: function(){ // starts as false, becomes true later, seems to be updated in dev-tools return this.order.foo || this.order.bar } } }