Refs and Ref Details in Vue3

Vue.createApp({
    template: `<div>{{ nameObj.name }}</div>`,
    setup() {
        const { reactive } = Vue
        const nameObj = reactive({name:'lilei',age:18})
        
        setTimeout(() => {
            nameObj.name = 'hanmeimei'
        },2000)
        return {
            nameObj
        }
    }
}).mount('#root')

Vue.createApp({
    template: `<div>{{ name }}</div>`,
    setup() {
        const { reactive, toRefs } = Vue
        const nameObj = reactive({name:'lilei',age:18})
                let { name } = nameObj
        setTimeout(() => {
            name.value = 'hanmeimei'
        },2000)
        return {
            name
        }
    }
}).mount('#root')

Vue.createApp({
    template: `<div>{{ name }}</div>`,
    setup() {
        const { reactive, toRefs } = Vue
        const nameObj = reactive({name:'lilei',age:18})
        let { name } = toRefs(nameObj)
        setTimeout(() => {
            name.value = 'hanmeimei'
        },2000)
        return {
            name
        }
    }
}).mount('#root')

Vue.createApp({
    template: `<div>{{ age }}</div>`,
    setup() {
        const { reactive, toRef } = Vue
        const nameObj = reactive({name:'lilei'})
        let age = toRef(nameObj,'age')
        setTimeout(() => {
            age.value = 'hanmeimei'
        },2000)
        return {
            age
        }
    }
}).mount('#root')