instances of classes are not displayed in data inspector

[rpkilby]

When using a plain object, both name and _name are displayed in the data inspector

new Vue({
    el: '#app',
    data: {
        customer: {
            _name: 'John Doe',
            get name() {
                return this._name;
            },

            set name(value) {
                console.log(`name set to: ${value}`);
                this._name = value;
            },
        },
    },
});

In this case, the inherited name property is missing from the data inspector

class Person {
    constructor() {
        this._name = 'John Doe';
    }

    get name() {
        return this._name;
    }

    set name(value) {
        console.log(`name set to: ${value}`);
        this._name = value;
    }
}

new Vue({
    el: '#app',
    data: {
        customer: new Person(),
    },
});

From an implementation standpoint, this might be related to vuejs/vue/issues/3610

[ericnilo]

Also whenever I commit/time travel the specific mutation in vuex (devtools) it becomes a plain Object instead of the original instance of the state/data

e.g.

state.form is an instance of Form class and state.form.errors is an instance of Error class, after commit/time travel, state.form and state.form.errors just became an Object instance :( and I get this error:

[ryuuji3]

I also have this behaviour when rewinding state. My state happens to be a class, but becomes a plain object; which causes a runtime exception when it attempts to call a prototype method which doesn't exist.

[jods4]

Sadly this is still the same in devtools 6.0.0-beta.15.

I suppose only owned keys are displayed in the data panel. When using classes, getter/setter properties are found on the object prototype.

This could be mitigated by a menu entry in the 3-dots menu was added to create a global variable, similar to $0 in the DOM explorer, that you could then dump on the console.