vue3全局變量動態變化值

我在我的vue3項目中遇到了一個問題，即全局變量不會更改模板中的值

main.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>

所以當我轉到頁面時，我可以在瀏覽器控制臺中看到全局變量實際上發生了變化

但在模板中它總是相同的（正如我在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>

謝謝關注。