Почему при использовании vue3-mq возникает ошибка 'Property «$mq» was accessed during render but is not defined on instance'?

Question

[Александра]

Поставила npm install vue3-mq, подключила и в консоли ошибка. Окружение Vite/Vue 3.

Подключение:

import { Vue3Mq } from 'vue3-mq';

app.use(Vue3Mq, {
  breakpoints: {
    xs: 0,
    sm: 768,
    md: 1024,
    lg: 1199,
    xl: 1559,
    xxl: Infinity
  }
});

Использую в computed:

displayText() {
      return this.$mq === 'sm' ? 'I am small' : 'I am large';
    }

Ошибка:

runtime-core.esm-bundler.js:40 [Vue warn]: Property "$mq" was accessed during render but is not defined on instance. 
  at <HomePage onVnodeUnmounted=fn<onVnodeUnmounted> ref=Ref< Proxy(Object) {currentLocAction: ƒ, prevLocAction: ƒ, changeLocation: ƒ, …} > > 
  at <RouterView> 
  at <BaseTransition appear=false persisted=false mode=undefined  ... > 
  at <Transition name="ani_fade" > 
  at <DefaultLayout> 
  at <IndexPage>

Как исправить?

Answer 1

[0xD34F]

vue3-mq

this.$mq

Что по этому поводу имеет сказать документация:

$mq has been removed as a global property and must now be injected into components that require it