Vue doesn't update DOM upon 'indirectly' changing the value of an expression

Question

TL;DR

I am trying to dynamically build a UI from JSON. The JSON represents a vue.js app with application state (variables) & UI building logic conditional on those variables.

The JSON object of "type": "switch" (see the fiddle linked below), directs the vue.js app to display one of many "cases": {"case1": {..}, "case2": {..}} depending on the value of a state variable "variable": "key" /*translates to vueApp.key */.

Changing one of the variables (update_status) leads to DOM update initially. Changing it again after mounting the app does not affect the DOM, sadly. I'm pretty sure I am doing something stupid or missing something subtle.

---

Slightly longer version:

(If you're still reading this, please look at the fiddle at this point. None of the below will make sense without it. Thanks!)

Vue.js Template (with app.variables.update_status = "available")

<script type="text/x-template" id="template-switch">
  <div>
      <!-- Debug statements -->
      Switch cases: {{data.cases}}<br>
      Variables: {{$root.variables}}


      <div v-for="(value, key) in data.cases">
          <div v-bind:class="$root.variables[data.variable]"
               v-if="key == $root.variables[data.variable]">
              <all-components v-bind:data="value"></all-components>
          </div>
      </div>
  </div>
</script>

Input JSON (bound as data in the above template):

{
    // Switch on value of app.variables.update_status
    "type": "switch",
    "variable": "update_status",   // Refers to app.variables.update_status
                                   // Used in <script id="template-switch">
    "cases": {
        // if app.variables.update_status == "checking" (Initial value)
        "checking": {
          "type": "paragraph",
          "text": "Checking for updates"
        },
        // if app.variables.update_status == "available" (Changed below)
        "available": {
            "type": "paragraph",
            "text": "Updates available."
        }
    }
}

My question:

Assuming app is the Vue.js app, I'd expect setting app.variables.update_status = "available" should lead to DOM change. But it doesn't as described in TL;DR section. I'm hoping to understand why.

What I have tried:

• Made the app watch the entire hierarchy under the object.
• I initially thought this is because Vue is unable to monitor object[key] expression where key can change. But its definitely able to do it.
• Last value set before mounting the app shows up. After the app is mounted, any change to the the variable sticks but doesn't trigger DOM update. (Annotated with "Doesn't work!" in the fiddle.)

Try it out!

Here's the JS Fiddle (heavily downsized, and commented for easier understanding :))

What to try:

Once the fiddle runs, open the browser console and try executing the following statements:

• DEBUG.variables.update_status = "available";
• DEBUG.variables.update_status = "checking";

Vue.js version: 2.5.16

---

Update

Also, I just found out that if I pass data object as:

new Vue({.., data: { .. , variables: {update_status: "temp"}}})

– it works!

I don’t understand this, primarily because variables field is set up to have a deep watcher. I’d assume that when it would have a its fields updated (such as variables.update_status = "new-value";), the observer would eventually trigger the DOM update. But for some reason this doesn’t happen.

I’m really hoping I’m doing something stupid, and that this isn’t this a bug.

Link to the new Fiddle that shows this behaviour: https://jsfiddle.net/g0z3xcyk/

Answer 1

The reason it won't update in your first fiddle is because Vue doesn't detect property addition or deletion, and you're not passing the update_status property when you instance vue, the docs explain it further.

In your second fiddle you're setting update_status when you instance vue and that's why changes, in that case, are detected.

Another option, as mentioned in the docs, is using Vue.set or recreating the object entirely by assigning it again with Object.assign