Fix issue where async getters did not work with watch option

Author: boukeversteegh

.babelrc

@@ -1,6 +1,7 @@
 {
   "plugins": [
     "@babel/plugin-transform-runtime",
-    ["@babel/plugin-proposal-decorators", { "legacy": true }]
+    ["@babel/plugin-proposal-decorators", { "legacy": true }],
+    ["@babel/plugin-proposal-class-properties"]
   ]
 }

src/index.ts

@@ -14,7 +14,7 @@ export default function AsyncComputed<TResult>(
             method = options.methods[key]
             delete options.methods[key];
         } else if (options.computed?.[key]) {
-            method = options.computed[key]
+            method = (options.computed[key] as IAsyncComputedValue<TResult>).get
             delete options.computed[key];
         } else {
             throw new Error(`AsyncComputed ${key} is not a method or computed property`);

test/index.js

@@ -12,10 +12,11 @@ test('The AsyncComputed decorator defines async computed properties', t => {
   @Component()
   class TestComponent extends Vue {
     @AsyncComputed()
-    async shouldBeComputed () {
+    async shouldBeComputed() {
       return 1
     }
   }
+
   const vm = new TestComponent()
 
   t.equal(vm.shouldBeComputed, null)
@@ -32,11 +33,12 @@ test('The AsyncComputed decorator allows options on async computed properties',
 
   @Component()
   class TestComponent extends Vue {
-    @AsyncComputed({ lazy: true })
-    async shouldBeComputed () {
+    @AsyncComputed({lazy: true})
+    async shouldBeComputed() {
       return 1
     }
   }
+
   const vm = new TestComponent()
 
   t.equal(vm.shouldBeComputed, null)
@@ -56,12 +58,13 @@ test('The AsyncComputed decorator can be applied to getter computed properties',
   @Component()
   class TestComponent extends Vue {
     @AsyncComputed({default: 0})
-    get shouldBeComputed () {
+    get shouldBeComputed() {
       return new Promise(resolve => {
         resolve(1)
       })
     }
   }
+
   const vm = new TestComponent()
 
   t.equal(vm.shouldBeComputed, 0)
@@ -72,3 +75,47 @@ test('The AsyncComputed decorator can be applied to getter computed properties',
     t.equal(vm.shouldBeComputed, 1)
   })
 })
+
+
+test('The AsyncComputed decorator works on getters with watch option', t => {
+  // t.plan(7)
+
+  @Component()
+  class TestComponent extends Vue {
+    watchValue = 'initial';
+    computationCount = 0
+
+    @AsyncComputed({default: 'default', watch: ['watchValue'], lazy: false})
+    get asyncGetter() {
+      this.computationCount++;
+      return new Promise(resolve => {
+        resolve(this.watchValue)
+      })
+    }
+  }
+
+  const vm = new TestComponent()
+
+  t.equal(vm.watchValue, 'initial', 'initial watch value')
+  t.equal(vm.computationCount, 1, 'getter calculation is triggered immediately')
+  t.equal(vm.asyncGetter, 'default', 'initial asyncGetter value')
+  t.equal(vm.computationCount, 1, 'getter is cached during this tick')
+
+  Vue.nextTick(() => {
+    t.equal(vm.asyncGetter, 'initial', 'getter is updated on next tick')
+    t.equal(vm.computationCount, 1, 'getter is not recalculated')
+
+    vm.watchValue = 'updated' // reactive set
+    t.equals(vm.asyncGetter, 'initial', 'getter returns cached value after watched value changes') // reactive get
+    t.equal(vm.computationCount, 1, 'no immediate recalculation after watched value changes')
+
+    Vue.nextTick(() => {
+      t.equal(vm.computationCount, 2, 'a recalculation is triggered on tick after watched value changes')
+      Vue.nextTick(() => {
+        t.equal(vm.asyncGetter, 'updated', 'getter value is updated in the ticket after recalculation was triggered')
+        t.equal(vm.computationCount, 2, 'there were 2 calculations in total')
+      })
+    })
+  })
+})
+