I have a computed property based on some nested object properties. When the object gets changed, the computed property seems to update (In vue-dev-tools) but the change is not reflected in the UI. I'm aware of nested object reactivity, but I never change/assign a nested property of my order object, the only time it changes is in the updateOrder() (which assigns the object at the root level.

Is there a reason why my UI isn't updating? Are the dev tools synced to the sames state as the UI is? Am I missing something about Vue's reactivity system?

Here is some very simplified code:

<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
    }
  }
}