vue3如何将 app 全局变量对象变为响应式并监听到某个属性的改变

main.js

const config = reactive(getData())

    // 设置屏幕方向
    const setOrientation = () => {
      config.orientation = getOrientation()
      window.config.orientation = getOrientation()
    }
    setOrientation()
    document.addEventListener('DOMContentLoaded', setOrientation)
    // 绑定屏幕旋转事件
    window.addEventListener('resize', setOrientation)
    window.mraid.addEventListener('sizeChange', setOrientation)
    // 避免锁定屏幕方向的情况下横屏进入，获取方向不对
    setTimeout(setOrientation, 1000)

    app.config.globalProperties.$config = config
    app.provide('config', readonly(config))

<Logo v-if="$config.orientation === 'portrait'"/>

const config = inject('config')
// 监听屏幕方向的改变，改变后再调用初始化样式的方法
watch(() => config.orientation, init, { immediate: true })

const internalInstance = getCurrentInstance()
const { $config } = internalInstance.appContext.config.globalProperties

// 监听屏幕方向的改变，改变后再调用初始化样式的方法
watch(() => $config.orientation, init, { immediate: true })