Binding to an undefined property works, but the DOM updates intermittently

In the following code, the Vue instance contains a hash of tabs, each of which has the property a. However a is initially undefined. The first part of the HTML allows you to change tabs, while the second allows you to change and view the value of a from the current tab. The confusing thing is that if you click on a number (1, 2, or 3), the value of currentTab.a does change, but the DOM does not. However if you switch tabs and then switch back, the DOM does update.

Here’s a jsfiddle, but I’ve copied the code below as well:

<h2>Choose Tab</h2>

<div
 v-repeat="tabs" 
 v-class="selected: $key == currentTabName"
 v-on="click: currentTabName = $key">{{$key}}</div>

<h2>Value of A</h2>

<div
 v-repeat="options"
 v-on="click: currentA = $value"
 v-class="selected: $value == currentA">{{$value}}</div>

var vm = new Vue({
    el: "body",
    data: {
        tabs: {
            //Note that the tabs do not have a value for a
            "Tab1": {},
            "Tab2": {}
        },
        currentTabName: "Tab1",
        options: [1, 2, 3]
    },
    computed: {
        //Returns the current tab object based on the tabName
        currentTab: function () {
            return this.tabs[this.currentTabName];
        },
        //Gets/sets the current tab's value of a
        currentA: {
            get: function () {
                return this.currentTab.a;
            },
            set: function (val) {
                alert("Current a changed!");
                this.currentTab.a = val;
            }
        }
    }
});

This almost working behaviour is very confusing. I suspect the problem is that the view layer doesn’t add currentA as a dependency because it is initially undefined. Ideally when it becomes defined it will be added as a dependency, but if this isn’t possible, a warning message here indicating that binding to an undefined property screws everything up would be very very helpful.

[Micaso]

A bit later 😄 this gonna not work if the value for the computed property comes from a vuex store

[yyx990803]

If it doesn’t contain a on first pass, then your currentA computed property won’t pick it up as a dependency, so essentially you got a “dead” computed property that never updates.

I think I’ve mentioned in the docs the best practice is to have a predictable data structure (i.e. explicitly list a: undefined in your tab objects before compilation)

And @builtap 's solution also works 😃