Vue3中非响应式变量在响应式变量更新后也会被刷新的问题

<script setup lang="ts">
import { ref } from 'vue';

let msg: string = "HelloWorld";
function changeMsg() {
    // 不是响应式
    msg = "HelloVue";
    console.log(msg);
}

// 通过 ref 定义响应式变量（本质是包了一层对象）
const counter = ref("HelloWorld");
function changeCounter() {
    counter.value = "HelloVue";
    console.log(counter.value);
}
</script>

<template>
    <div>
        {{ msg }}
        <button @click="changeMsg">改变msg</button>
    </div>
    <div>
        <!-- 会自动浅解包 -->
        {{ counter }}
        <button @click="changeCounter">改变counter.value</button>
    </div>
</template>