asyncComputed property doesnt show up in vue dev-tools unless lazy is true

[ctf0]

for example

// wont show up
asyncComputed: {
    selectedFilePreview: {
        get() {
            return {
                key: val
            }
        }
    }
}

// will show up
asyncComputed: {
    selectedFilePreview: {
        get() {
            return {
                key: val
            }
        },
        lazy: true
    }
}

am not sure if this is a bug or intended, if you need any extra info plz advice.

[foxbenjaminfox]

In the dev tools you'll find your async computed property in the data section of the dev tools.

Yes, that isn't really the appropriate place for it. It would be nice if it showed up as the computed property that it is. Unfortunately, the dev tools don't take into account what this plugin is doing, and I don't really have an easy way to change that.

I hope that being able to see your selectedFilePreview in the data section of the dev tools will manage to meet your needs. Other than the odd location it shouldn't really affect anything too much.

[ctf0]

yeah np, but is there a reason why using lazy: true force the asyncComputed props to show under computed ?

[foxbenjaminfox]

It's because lazy: true is implemented as a normal computed property wrapping the "real" async computed property. This (normal, synchronous) computed property has a getter which (when first invoked) triggers the first load of the async value.

This is kind of a hack, and all in all I'm not too happy with the complexity needed to implement lazy async computed properties. But it works fine, so even though in retrospect it's a feature I probably shouldn't have added, I have no reason to remove it. All in all, it means that lazy async computed properties work behind the scenes that bit differently, and that gets expressed in how it shows up in the dev tools.