Inconsistent behavior using reactive and ref objects

[Flamenco]

Version

2.7.4

Reproduction link

Vue 2
codesandbox.io
Vue 3
codesandbox.io

Steps to reproduce

The documentation for Vue 2.7 states there are issues using a reactive array. This report is when using an empty reactive object. Either the documentation and warnings need to be updated, or the implementation corrected.

Avoid using arrays as root values in reactive()
because without property access the array's mutation won't be tracked
(this will result in a warning).

Because I am using an object, not an array, no warnings are generated.

Here are the differences I get when using Vue 2.7.x versus Vue 3.x:

const reactiveData = reactive({});
const refData = ref({});

Vue 3

reactiveData.foo = 'bar' 
refData.value.foo = 'bar'

• reactive watcher called
• reactive deep watcher called
• ref watcher NOT called
• ref deep watcher called

Vue 2

set(reactiveData, 'foo', 'bar')
set(refData.value, 'foo', 'bar')

• reactive watcher NOT called
• reactive deep watcher NOT called
• ref watcher called
• ref deep watcher called

What is expected?

Watchers/Reactivity should be consistent.

What is actually happening?

Watchers/Reactivity is not consistent.

[Flamenco]

I am not the authority to say what is to be expected. I feel that the behavior should be the same though, or the documentation should clearly state what the differences are.

Having said that, my opinion is:

• Setting the root properties on a reactive object should fire both deep and shallow watchers, as Vue3 does, but Vue 2 current does not fire either one.
• Setting the root properties on a reactive ref object should fire only the deep watchers. Vue 3 does this as well, but Vue 2 fires both the shallow and deep watcher.

So IMHO Vue3 is correct and Vue2 is wrong.

I will also add that I was using Vue Composition API plugin before migrating to Vue 2.7, and the reactivity behavior changed.

[Flamenco]

If things are left as they are, and not considered to be bugs, I would suggest documenting in Vue 2.7 to state:

Reactive Objects

Do not using an empty reactive object, or modify a root property on a reactive object, if you expect to watch for any changes (deep or not).

Ref Objects

Using a ref object will fire both non-deep and deep watchers when modifying root properties, but this will not occur in Vue 3. In Vue3 only deep watchers will fire unless the entire object is swapped out.