Vue3 Cannot read globalProperties in component - vuejs3

Question

I am converting an existing app from vue 2 to 3.
I am having troubles with accessing globalProperties in components. In some instances using this.$propertyname returns undefined
In my main.js file:
import { createApp } from 'vue'
import App from './App.vue'
import {
appPageLoader
} from '#/store/reactives'
function mount(el){
let app = createApp(App)
app.config.globalProperties.$pgLoader = appPageLoader
// This console log returns proper value
console.log('^^^', appAnnouncer, app.config.globalProperties.$pgLoader)
app.mount(el)
}
mount('#app')
appPageLoader.js
This file contains a reactive object which we can import and assign to globalProperties $pgLoader
import { reactive } from "vue";
let pgLoader = {
pageLoadAnchor: null,
setFocusToTop () {
if (this.pageLoadAnchor instanceof HTMLElement) {
this.pageLoadAnchor.focus()
} else {
console.log('Cannot setFocusToTop() - pageLoadAnchor not found!')
}
}
}
let ReactivePageLoader = reactive(pgLoader)
export default ReactivePageLoader;
app.vue
When trying to access globalProperties using this.$property, I get undefined in component:
import { getCurrentInstance } from "vue";
mounted() {
this.$pgLoader.pageLoadAnchor = this.$refs.pageLoadAnchor; <- this.$pgLoader returns undefined
getCurrentInstance().appContext.config.globalProperties.$pgLoader = this.$refs.pageLoadAnchor; <- works but cumbersome
},