Why normal objects become reactive automatically in Vue3? - vue.js

Question

In this article there is an example. It says the normal object wont be 'reactive'.
I made a test in this codesandbox, and found that changes to the normal object (even the normal string) can automatically change the view.
<template>
{{ personName }} <!-- will change to Amy, why? -->
{{ person.name }} <!-- will change to Amy, why? -->
{{ personRef.name }}
{{ personReactive.name }}
<button #click="changeName('Amy')">changeName</button>
</template>
<script setup>
import { ref, reactive } from "vue";
let personName = "John";
const person = { name: "John" };
const personRef = ref({ name: "John" });
const personReactive = reactive({ name: "John" });
const changeName = (name) => {
personName = name;
person.name = name;
personRef.value.name = name;
personReactive.name = name;
};
</script>
How did this happen? Did I miss something in the Vue document?
I've tried the Vue SFC Playground which gives the same result.

Answer 1

The normal variables are not becoming reactive. What is really happening is a re-render that is caused by the changeName() method. The re-render is caused because you changed the values of the reactive variables. As a result, The DOM is updated with the latest values correctly shown for both normal and reactive variables.
To illustrate this I have created a fork of your sandbox with this code:
<template>
{{ personName }}
{{ person.name }}
{{ personRef.name }}
{{ personReactive.name }}
<button #click="changeReactiveName('Amy')">changeReactiveName</button>
<button #click="changeNormalName('Fanoflix')">changeNormalName</button>
</template>
<script setup>
import { ref, reactive } from "vue";
let personName = "John";
const person = { name: "John" };
const personRef = ref({ name: "John" });
const personReactive = reactive({ name: "John" });
const changeReactiveName = (name) => {
personRef.value.name = name;
personReactive.name = name;
};
const changeNormalName = (name) => {
personName = name;
person.name = name;
};
</script>
When you change only the non-reactive variables by calling changeNormalName(), the change (correctly) does not cause a DOM re-render and you will not see the changes reflected in the DOM.
Once you call the changeReactiveName() method, the DOM will be re-rendered to incorporate the changes done to the reactive variables. Hence, The DOM will also render the new values of the non-reactive variables which you updated previously and will show Fanoflix.
For a better understanding read how Vue handles rendering: docs