There is an example discussed in this particular article. It mentions that a normal object is not 'reactive'.
Upon testing in this codesandbox environment, it was observed that changes made to the normal object, including a plain string, can automatically update 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 is this behavior explained? Is there something missing in the Vue documentation?
An attempt was also made using the Vue SFC Playground, which yielded the same outcome.