Version

3.2.24

Reproduction link

sfc.vuejs.org/

Steps to reproduce

Click "Test tada" button

What is expected?

strings represent randomized generated values will be display on the bottom of vue component. (the reactivity of wrapper.target.options will be trigger re-render)

What is actually happening?

nothing is displayed on the bottom of vue component. (the reactivity of wrapper.target.options never trigger re-render)

The problem is found by changing a class property inside an async class method. As providing in the example, it's okay to set the value from outside, such as:

wrapper.target.updateOptions(something) // this would be okay, and would trigger reactive re-render

But if we perform some asynchronous operations inside the class wrapped by reactive calls (or we called as BusinessModel here, we called wrapper.target.fetchAndUpdate), and eventually called another synchronous method inside the class itself to perform the final modification (here we called wrapper.target.updateOptions inside the wrapper.target.fetchAndUpdate), the reactivity loses, and eventually any effect depends on wrapper.target.options won't receive any notification.

wrapper.target.fetchAndUpdate() // this would not be okay, and wouldn't trigger reactive effects

It's because you used a non existant method resetOptions. It works if you use the right method