Why watch doesn't invoke when I usePromise?

Viewed 146

I'm using @vue/composition-api and usePromise from vue-composable.

I watch on computed value that return from a promise. the promise is resolve after 12000ms.

For the first time the computed and watch are invoked, but after 12000ms none of them is invoke. so the watch callback doesn't work. even the api.result is changed.

I can see that value changed in the template by printing: {{items}}.

How to solve this unexpected behavior? how to call the watch callback when the value change?

here is the output:

 in computed
 in watch

expected:

     in computed
     in watch
     in computed <-- data is resolved the api.result changed (has new value).
     in watch <--- same.

The code:

  setup() {

    function timeout(ms) {
      return new Promise((resolve) => setTimeout(resolve, ms));
    }

    const api = usePromise(() => Promise.all([timeout(12000).then(() => ({ some: 'data'}))]));

    const items = computed(() => {
      console.log('in computed');
      return api.result;
    });

    watch(items, (v) => {
      console.log('in watch');
    })

    api.exec();
    return { items }

This is works:

  watch(api.result, (v) => {
    console.log('in watch api.result');
  })

But why computed doesn't work? how make it recalculate so the watch on computed will work?

The code on codesandbox

0 Answers
Related