vue3 reactive数据更新，视图不更新问题

初次使用vue3 通过reactive 做响应式处理时，发现更新了数据，试图不更新问题。代码是这样写的

<template>
    <div>
        <div>
            数据：{
   {
    dataList.name }}
        </div>
        <el-button type="primary" @click="btnFn()">修改数据</el-button>
    </div>
</template>

<script lang="ts" setup>
    import {
   
        reactive,
    } from 'vue'
    let dataList = reactive({
   
        name:'张三',
    });
    const btnFn = async () => {
   
        dataList = {
   
            name:'李四',
        };
        console.log(dataList)
    }
</script>

查阅资料说是需要内部再加个对象
改为：

<template>
    <div>
        <div>
            数据：{
   {
    dataList.data.name }}
        </div>
        <el-button type="primary" @click="btnFn()">修改数据</el-button>
    </div>
</template>

<script lang="ts" setup>
    import {
   
        reactive,
    } from 'vue'
    const dataList = reactive({
   
        data: {
   
            name: '张三',
        }
    });
    const btnFn = async () => {
   
        dataList.data = {
   
            name: '李四',
        };
        console.log(dataList)
    }
</script>