How to add reactive property to module injection (@nuxtjs/auth) in Nuxt?

Question

css

I use Nuxt + Vuex + @nuxtjs/auth. The latter is available from the context as $auth. There is an idea to add some properties for $auth, which will return getters from the store. For example $auth.isPro. I add via plugin. The problem is that when wrapped in a function, everything works as it should, but then you have to call $auth.isPro(), which is not convenient. And when you try to make it a property, reactivity is lost. Plugin code:

import Vue from 'vue';

export default function ({ $auth, store }) {
  $auth.isProFunction = () => {
    return store.getters.isPro;
  };

  Vue.set($auth, 'isProProperty', store.getters.isPro); // Не работает, теряет реактивность
}

Created a live example: https://stackblitz.com/edit/github-xn1epa-d5kz9z?f...

Answer 1

For progress write display:block

Answer 2

Object.defineProperty($auth, 'isPro', {
  get: () => store.getters.isPro,
});