Vue 2 Reactivity: computed property doesn't trigger DOM update [closed]

Question

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

Answer 1

TLDR: Make sure you don't have any javascript errors in the console

I could not reproduce the error in an isolated codepen. So I figured something else was going on. I had some errors being thrown from a side effect of updating my order. They seemed unrelated, but once I fixed all my errors, the bug went away. I think the error short-circuited the Vue lifecycle even if the error had nothing to do with my computed property.

Answer 2

Nested objects does not automatically update computed properties, you can watch for changes in the Watch property.

 watch: {
    'order.foo'(newValue) {
      // * If any changes happed, this will be triggered !
    }
  }