I'm relatively new to Vue 3, working on an application in which many components need access to the value of screen width, with the necessity of updating it dynamically as the window resizes.

Is there any elegant, no-third-party-plugin solution for implementing such a variable once, and using it in multiple components, without having to add event listeners seperately inside each one of them?

I've tried to define windowWidth in main.js as a globalProperty, and add a window event listener:

import { createApp, ref } from "vue";
import App from "./App.vue";
import router from "./router";

const app = createApp(App).use(router);

app.config.globalProperties.breakpoints = {
  sm: 768,
  md: 1024,
  lg: 1200,
};

app.config.globalProperties.winWidth = ref(window.innerWidth);

window.addEventListener(
  "resize",
  () => (app.config.globalProperties.winWidth = window.innerWidth)
);

app.use(router);
app.mount("#app");

But the value does not change when I resize the window (calling winWidth inside a <p> tag in a component to test).

I would love to learn how to implement this successfully!