Issue with watch in asyncComputed.

[metronom72]

I'm trying to use the next code:

export default {
    asyncComputed: {
        myAwesomeF: {
            get() { },
            watch:  ['fn']
        },
        fn: {
            get() { }
        },
    }
}

and after build it provide the next error trace:

vendor.js?186b24eb556f851a18b5:2185 [Vue warn]: Error in getter for watcher "_async_computed$myAwesomeFn": "TypeError: fn.watch.call is not a function"

found in

---> <Root> at src\toolbar\root.vue
       <Root>
warn @ vendor.js?186b24eb556f851a18b5:2185
logError @ vendor.js?186b24eb556f851a18b5:3329
globalHandleError @ vendor.js?186b24eb556f851a18b5:3324
handleError @ vendor.js?186b24eb556f851a18b5:3313
get @ vendor.js?186b24eb556f851a18b5:4737
Watcher @ vendor.js?186b24eb556f851a18b5:4723
Vue.$watch @ vendor.js?186b24eb556f851a18b5:5203
created @ vendor.js?186b24eb556f851a18b5:66729
callHook @ vendor.js?186b24eb556f851a18b5:4513
Vue._init @ vendor.js?186b24eb556f851a18b5:6222
VueComponent @ vendor.js?186b24eb556f851a18b5:6390
createComponentInstanceForVnode @ vendor.js?186b24eb556f851a18b5:5902
init @ vendor.js?186b24eb556f851a18b5:5723
createComponent @ vendor.js?186b24eb556f851a18b5:7200
createElm @ vendor.js?186b24eb556f851a18b5:7147
patch @ vendor.js?186b24eb556f851a18b5:7722
Vue._update @ vendor.js?186b24eb556f851a18b5:4252
updateComponent @ vendor.js?186b24eb556f851a18b5:4380
get @ vendor.js?186b24eb556f851a18b5:4734
Watcher @ vendor.js?186b24eb556f851a18b5:4723
mountComponent @ vendor.js?186b24eb556f851a18b5:4387
Vue.$mount @ vendor.js?186b24eb556f851a18b5:10132
Vue.$mount @ vendor.js?186b24eb556f851a18b5:12531
Vue._init @ vendor.js?186b24eb556f851a18b5:6232
Vue @ vendor.js?186b24eb556f851a18b5:6321
575 @ toolbar.js?186b24eb556f851a18b5:2117
__webpack_require__ @ manifest.js?186b24eb556f851a18b5:55
webpackJsonpCallback @ manifest.js?186b24eb556f851a18b5:26
(anonymous) @ toolbar.js?186b24eb556f851a18b5:2
vendor.js?186b24eb556f851a18b5:3333 TypeError: fn.watch.call is not a function
    at VueComponent.getter (vendor.js?186b24eb556f851a18b5:66757)
    at Watcher.get (vendor.js?186b24eb556f851a18b5:4734)
    at Watcher.evaluate (vendor.js?186b24eb556f851a18b5:4841)
    at VueComponent.computedGetter [as _async_computed$myAwesomeFunction] (vendor.js?186b24eb556f851a18b5:5099)
    at VueComponent.<anonymous> (vendor.js?186b24eb556f851a18b5:2071)
    at Watcher.get (vendor.js?186b24eb556f851a18b5:4734)
    at new Watcher (vendor.js?186b24eb556f851a18b5:4723)
    at VueComponent.Vue.$watch (vendor.js?186b24eb556f851a18b5:5203)
    at VueComponent.created (vendor.js?186b24eb556f851a18b5:66729)
    at callHook (vendor.js?186b24eb556f851a18b5:4513)

What am I doing wrong?

[foxbenjaminfox]

Which version of vue-async-computed are you using? It looks to me that you're using a slightly older version, pre v3.6.0, which doesn't support array-style watchers.

If so, you can either upgrade to the latest version of vue-async-computed, or, if you're stuck on an old version for some reason, you can use old-style watchers (although those are a fair bit messier.) You can read here in this old version of the README about how to do that. (Although again, I recommend upgrading to the latest version if you can, because the new array style of watcher is much clearer, in my opinion.)