Can't Set Reactive Property Asynchronously

[bendytree]

Apologies if I'm totally missing something here but can't get reactivity to work. For example:

<div>{{ count }}</div>

setup() {
    const state = reactive({ count: 1 });
    setTimeout(() => { state.count = 2; }, 1);
    return state;
}

In Vue 3 this works. Count is updated to 2:
https://jsfiddle.net/8ogjahcb/

In composition-api (v1.0.0-beta.10) count never gets updated. It stays at 1.
https://jsfiddle.net/msrz7w4e/

This example was inspired by the Vue 3 docs.

[danielroe]

@bendytree Try not returning a reactive object as it will be destructured at that point (and therefore lose reactivity) but rather return an object with refs inside - or even have your reactive object within the returned object.

[bendytree]

Thanks @danielroe - I should have mentioned it does work if you add return toRefs(state);. I didn't need toRefs in Vue 3 so I was just trying to raise awareness in case it's something they'd want to fix

[antfu]

Confirmed as a bug, the top-level reactive return is not be handled correctly. If you change to this it will work

   setup() {
    const state = reactive({ count: 1 });
	
     setTimeout(() => {
       state.count = 2;
     }, 1);

    return { state };
   }

Working on the fix