Передача данных в глобальный компонент в vuejs

Question

Это мой первый вопрос по stackoverflow. Пожалуйста, не стесняйтесь сказать, если мне нужно отредактировать его.

Я создал глобальный компонент, который называется Popup.vue

<div class="popup-background" id="vue-popup" @click.self="$emit('close')">
    <div class="popup-info-box" :class="customClasses" :style="infoBoxPosition()">            
        <slot></slot>
    </div>
</div>

<script>
export default {
    props : {
        customClasses : {
            default : () => '',
        },
    },
    data() {
        return {
            hasMounted : false,
        }
    },
    methods : {
        infoBoxPosition() {
            if( !this.hasMounted ) {
                return { 'right' : '0px', 'top' : '0px' };
            }

            let parent = document.querySelector('#vue-popup').parentElement;
            let bounds = parent.getBoundingClientRect();

            return { 'right' : ( document.body.clientWidth - bounds.right ) + 'px', 'top' : bounds.bottom + 'px' };
        }
    },
    mounted() {
        this.hasMounted = true;
    },
}

Текущее поведение

Я передаю html моему компоненту Popup.vue непосредственно из моего компонента фильтра.

Пример : Filter.vue

<div class="menu" v-for="( filter, key ) in filters">
        <div class="filter-button" @click="openMenu( key )">
            <span>
                {{ $t(`filters.${key}`) }}
            </span>
        </div>
        <transition name="fade">
            <Popup :customClasses="{ 'filter-menu' : filter.hide }" v-show="getActiveMenu == key" @close="toggleMenu( '' )">
                <div class="filter-menu-top">
                    <div>
                        {{ filter.values.min }}
                    </div>
                    <div>
                        {{ filter.values.max }}
                    </div>
                </div>
                <div class="filter-menu-bottom">
                    <div class="filter-action-button apply" @click="applyFilter( filter, key )">
                        {{ $t(`filters.actions.apply`) }}
                    </div>
                </div>
            </Popup>
        </transition>
    </div>

Задача

Я зарегистрировал Popup.vue как глобальный компонент, теперь я могу использовать его в любом другом компоненте без необходимости его импорта. Это здорово, но у меня есть другая проблема.

Я хочу динамически изменять содержимое Popup.vue. Например, когда пользователь нажимает кнопку фильтра, он должен видеть меню фильтра внутри всплывающего окна. Когда пользователь нажимает, он видит форму входа во всплывающем окне и так далее.

Popup.vue должен быть достаточно общим, и я хотел бы использовать его везде, где мне нужно такое поведение выпадающего меню. Как я могу управлять контентом Popup, не используя его в шаблоне каждого компонента ??

Желаемое решение

Какой-то способ поместить компонент Popup.vue в мой компонент App.vue и управлять всплывающим контентом из любого компонента, не вставляя мое всплывающее окно в каждый нужный мне компонент.

Мысли

Я думал об использовании Vuex и привязке некоторых действий в каждом компоненте для отправки шаблона в виде строки в состояние Vuex и чтения его в моем компоненте Popup.vue. Но это кажется ненадежным и не масштабируемым решением.

Заранее спасибо.