reactive/ref为什么无法同步一个对象属性的更改 | Why reactive/ref cannot track a attribute of an object

[Yesdevelop]

Here is the code:

<script setup>
import { reactive } from 'vue'
let obj = {a: {b: 1}}
const msg = reactive(obj.a)

function changeValue() {
  obj.a.b++
}
</script>

<template>
  <h1>{{ msg.b }}</h1>
  <button @click="changeValue">change the value</button>
</template>

When clicking the button, what will happen?

Vue lovers who had lots of experience will quickly answer: nothing will happen. While A Vue starter like me will be confused.

The correct code that will run ideally:

<script setup>
import { reactive } from 'vue'
let obj = reactive({a: {b: 1}})
const msg = reactive(obj.a)

function changeValue() {
  obj.a.b++
}
</script>

<template>
  <h1>{{ msg.b }}</h1>
  <button @click="changeValue">change the value</button>
</template>

Why?

[LinusBorg]

Mutations are only observed when done through the reactive proxy, not when done on the original non-reactive object.

Docs: https://vuejs.org/guide/essentials/reactivity-fundamentals.html#reactive-proxy-vs-original-1

[Yesdevelop]

Mutations are only observed when done through the reactive proxy, not when done on the original non-reactive object.

Docs: https://vuejs.org/guide/essentials/reactivity-fundamentals.html#reactive-proxy-vs-original-1

Thanks