vue3中retive的错误用法导致数据不跟新

<template>
    <div>
        司藤的信息==>{{ objInfo  }}
        <button @click="handerHttpServe">获取远端的值</button>
    </div>
</template>
<script>
import { reactive } from '@vue/reactivity'
export default {
    setup () {
        let objInfo=reactive({ })
        function handerHttpServe(){
            setTimeout(()=>{
                objInfo={
                    name:'司藤',
                    sex:'女',
                }
            },400)
        }
        return {
            objInfo,
            handerHttpServe
        }
    }
}
</script>

setup () {
    let objInfo=reactive({})
    function handerHttpServe(){
        setTimeout(()=>{
            objInfo.name="张三"
        },400)
    }
    return {
        objInfo,
        handerHttpServe
    }
}

export default {
    setup () {
        let objInfo=reactive({
            obj:{
            }
         })
        function handerHttpServe(){
            setTimeout(()=>{
                objInfo.obj={
                    name:'司藤',
                    sex:'女',
                }
            },400)
        }
        return {
            objInfo,
            handerHttpServe
        }
    }
}