How to declare and use global variable with Vue?

Question

Vue.js

I'm starting to learn Vue. I work through CLI

I want to change the state of DOM elements when the screen orientation changes.

I know how to track the change.

But a question arises. Almost all elements on the page should track this change. Pushing this function into everyone is wrong, as I understand it.

For almost all elements, I write components.

How and where to define a global parameter (variable) to bind the class of the required components?

Like this:

<template>
    <img class='menu-butt' 
    :class='{ "menu-butt__header": mobile}'
    src='/img/кнопка.png'>
</template>

//Отслеживаю так:
if(window.matchMedia('(orientation: portrait)').matches){
        this.mobile = true
      }