Сделайте общее свойство реактивным в Vue Composition API, объявляя переменную вне экспортируемой функции

Question

Я использую подключаемый модуль api композиции для vue2 (https://github.com/vuejs/composition-api), чтобы повторно использовать компоненты в моем приложении.

У меня есть два компонента, которые повторно используют мои modalTrigger.js composable, где я хотел бы объявить какое-то общее состояние (вместо использования раздутого управления состоянием vuex).

Итак, в своих компонентах я делаю что-то вроде:

      import modalTrigger from '../../../../composables/modalTrigger';

export default {
    name: 'SearchButton',
    setup(props, context) {
        const { getModalOpenState, setModalOpenState } = modalTrigger();


        return {
            getModalOpenState,
            setModalOpenState,
        };
    },
};

И в моем modalTrigger у меня есть такой код:

      import { computed, ref, onMounted } from '@vue/composition-api';

let modalOpen = false; // needs to be outside to be accessed from multiple components

export default function () {
    modalOpen = ref(false);
    const getModalOpenState = computed(() => modalOpen.value);

    const setModalOpenState = (state) => {
        console.log('changing state from: ', modalOpen.value, ' to: ', state);
        modalOpen.value = state;
    };

    onMounted(() => {
        console.log('init trigger');
    });

    return {
        getModalOpenState,
        setModalOpenState,
    };
}

Это работает, но только потому, что я объявляю modalOpenпеременная вне функции. Если я использую это:

      export default function () {
    const modalOpen = ref(false); // <------
    const getModalOpenState = computed(() => modalOpen.value);
    ...

Он не является реактивным, потому что экземпляр modalTrigger создается дважды, оба с его собственным реактивным свойством.

Я не знаю, действительно ли это правильный путь, кажется, я делаю что-то не так.

Я также пробовал объявить рефери снаружи:

      const modalOpen = ref(false);

export default function () {
    const getModalOpenState = computed(() => modalOpen.value);

Но это вызовет ошибку:

Неперехваченная ошибка: [vue-композиция-api] должна вызывать Vue.use (плагин) перед использованием любой функции.

Итак, каков был бы правильный способ добиться этого? Я почему-то ожидал, что Vue будет знать о существующем экземпляре modalTrigger и сам обрабатывать создание дубликатов переменных ...

Что ж, в любом случае, заранее большое спасибо за любые подсказки и подсказки.

Ваше здоровье