Nested reactivity with ref is diffrent between Vue 2.7 & Vue 3

Question

While trying to migrate from Vue 2.7 to Vue 3 using @vue/compat we had many issue in the reactivity system.

After investigation we could isolate the issue. Here you can find the same code running on two diffrent versions of Vue :

1. Example with Vue 2.7
2. Example with Vue 3

Explanation of the issue :

We have a JS object :

let x = {
  name : "Monkey D. Luffy",
  age : 19
}

We create a ref object with the object x as a nested object under the attribut pirate :

const obj = ref({
  pirate: x, // nested object
  bounty : 300,
})

On the interface we display obj and two buttons. Each one of the buttons modifies the nested object diffrently.

The first button calls this function :

const addAge = () => {
  obj.value.pirate.age++
  console.log(obj.value.pirate.age)
}

Simple, it's changed the value of age by accesing it from obj. The next logged age is the right new incremented value and the interface is updated directly. The result is the same in both Vue versions.

The second button calls this function :

const addAge2 = () => {
  x.age++
  console.log(obj.value.pirate.age)
}

In this function we are trying to change the value of age by accesing it from x and we assume that it will change the nested object in obj since it's a reference to the object x we are modifing. In both Vue version the logged age is the right new incremented value. So the value was changed in obj "indirectly". But, in Vue 2.7 the interface is update and NOT in Vue 3.

Was there a change in how ref or reactivity works between 2.7 & 3 ? I couldn't find a documentation or anything mentioning that.