我在vue 3项目中遇到了一个问题，即全局变量不会更改模板中的值

主文件.js

import router from './router'
import { createMetaManager } from 'vue-meta'
import i18n from './assets/js/i18n.js'
import App from './App.vue'
import { reactive } from 'vue'

import './assets/js/app.js'
import './assets/styles/app.scss'

const app = createApp(App)
  .use(router)
  .use(i18n)
  .use(createMetaManager())

app.config.globalProperties.$test = reactive({ id: 1, name: 'test' })

app.mount('#app')

然后我尝试访问组件中全局变量**$test**，方法如下：

<template>
    <template v-if='$test.id'>{{ $test }}</template>
    <button class='btn btn-primary' @click='set'>change</button>
    <button class='btn btn-primary' @click='reset'>reset</button>
    <button class='btn btn-primary' @click='update'>update</button>
</template>

<script>
export default {
    methods: {
        set() {
            this.$test = { id: 3, name: 'user3' }
            console.log(this.$test)
        },
        reset() {
            this.$test = []
            console.log(this.$test)
        },
        update() {
            this.$test.name = 'updated name'
            console.log(this.$test)
        },
    },
    mounted() {
        this.$test = { id: 2, name: 'user' }
        console.log(this.$test)
    }
}
</script>

因此，当我转到该页时，可以在浏览器控制台中看到全局变量实际上更改了x1c 0d1x
但是在模板中它总是相同的（就像我在main.js中设置的那样）

所以我的问题是如何在模板中动态地改变全局变量？
将来它应该是一个$user对象，所以当用户登录时，我需要用数据填充该$user对象，当用户注销时，我希望使该对象为空，如this.$user = []，并在模板中通过v-if v-else向用户显示或 * 登录/注册链接 * 或 * 转到配置文件链接 *，如：

<tempalte>
    <a href='/profile' v-if='$user.id'>Profile</a>
    <a href='/register' v-else'>Register</a>
</template>

谢谢大家的关注。