Как передать логин/пароль после loginScreen?

компонент app.f7.html:

<template>
    <div id="app">
        <!-- Your main view, should have "view-main" class -->
        <div class="view view-main view-init safe-areas" data-url="/"></div>

        <!-- Login Screen -->
        <div class="login-screen" id="fppLoginScreen">
            <div class="view">
                <div class="page">
                    <div class="page-content login-screen-content">
                        <div class="login-screen-title">Вход</div>
                        <div class="list">
                            <ul>
                                <li class="item-content item-input">
                                    <div class="item-inner">
                                        <div class="item-input-wrap">
                                            <input type="email" name="email" placeholder="Email" value="{{email}}"
                                                   @input="updateEmail" required validate>
                                        </div>
                                    </div>
                                </li>
                                <li class="item-content item-input">
                                    <div class="item-inner">
                                        <div class="item-input-wrap">
                                            <input type="password" name="password" placeholder="Пароль"
                                                   value="{{password}}" @input="updatePassword" required validate>
                                        </div>
                                    </div>
                                </li>
                            </ul>
                        </div>
                        <div class="list">
                            <ul>
                                <li>
                                    <a href="#" class="login-screen-close item-link list-button login-button{{#if submitButtonState}}{{else}} disabled{{/if}}">Войти</a>
                                </li>
                            </ul>
                            <div class="block-footer">Укажите свои логин и пароль.</div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>
<script>
    let pageData = {
        email: '',
        password: '',
    };
    let isValidEmail = false;
    let isValidPassword = false;
    let updateSubmitButtonState = function () {
        this.submitButtonState = isValidEmail && isValidPassword;
    };
    updateSubmitButtonState.apply(pageData);

    export default {
        data() {
            return pageData;
        },
        methods: {
            updateEmail(e) {
                this.email = e.target.value;
                isValidEmail = e.target.validity.valid;
                updateSubmitButtonState.apply(this);
                this.$update();
            },
            updatePassword(e) {
                this.password = e.target.value;
                isValidPassword = e.target.validity.valid;
                updateSubmitButtonState.apply(this);
                this.$update();
            },
        },
    }
</script>

Показываю открываю окно

            app.loginScreen.create({
                    el: '#fppLoginScreen',
                    on: {
                        close: function (e) {
                            console.log(e);
                            console.log(this);
                            console.log(loginScreen);
                        }
                    }
                })
                .open();

Как мне передать логин/пароль в контекст вызова? ну например по закрытию loginScreen или как в компоненте выбросить кастомное событие по сабмиту, чтобы его слушать в контексте открытия?

Наверное сложно написал. Попробую еще:

На странице приложения мне нужно инициировать ввод логина/пароля. Для этого создаю экземпляр loginScreen и вызываю open(). Окно открывается, при вводе логина/пароля внутри компонента все методы видят значения полей через this. Но мне эти значения нужно передать в место инстанцирования. Просто ни у экземпляра loginScreen ни в параметрах обработчика события close, ни в this не нашел этих полей. Заэмитить событие экзепляра внутри компонента тоже не пойму как сделать, а выбрасывать глобальное через app не хотелось бы.

Не очень еще понятно куда передать? Где вызывается app.loginScreen.create, почему не в app.f7.html? И судя по коду email и password должны быть доступны как this.$root.email и this.$root.password в других f7.html компонентах

Компонент loginScreen декларирован в app.f7.html (в его методах через this я имею доступ к login/password). Его я использую (создаю экземпляр и показываю) в месте, где система понимает что нужна авторизация. Ну например корневой роут “/” и у него страница/компонент home.f7.html. В ней мне нужно обратиться к серверу, но перед обращением я понимаю, что требуется получить токен и соответственно показываю окно ввода логина/пароля и в ней мне нужно получить логин/пароль после закрытия этого окна чтобы авторизовать пользователя. Я так предполагаю что это как всплывающее полноэкранное окно, без собственного пути/роута. как бы в воздухе. Или так нельзя и нужно делать отдельный путь/роут для авторизации?

В любом случае даже если я в компоненте loginScreen посылаю логин/пароль на сервер и получаю токен, то мне нужно как-то его передать инициатору авторизации, ну то есть в место где это окно было открыто.

Как-то вы все равно сложно пытаетесь сделать. Но даже в этом случае надо тогда чтобы все операции с логин скрином были в root компоненте, и сделать root метод типа auth который будет получать коллбэк:

methods: {
  auth(callback) {
    // проверяем и открываем логин скрин
    // отправляем данные на сервер
    // сохраняем токен например в localStorage
    // или посылаем его в callback
    callback(token)
  }
}

И где надо вызывать его из других компонентов:

this.$root.auth((token) => {
  // console.log(token)
})

А вообще как правило авторизация делает раз в одном месте и токен сохраняется чтобы его каждый раз не запрашивать

Дело в том, что токен имеет срок годности. Я то его сохраняю в локальный сторэдж, просто архитектуру задумал так, что перед запросом к апи, анализируется наличие токена, если его нет, то запрашивается у пользователя логин/пароль, если токен есть и просрочен, то отправляется запрос на рефреш (с помощью другого токена, прозрачно для пользователя). Если вдруг при обращении к api методу получаю 401, то опять же пытаюсь обновить токен, если не получается, то запрашиваю логин/пароль у пользователя. То есть запрос логина/пароля у пользователя может быть в любой момент.

Наверное просто не совсем разобрался с компонентами или не до конца понимаю как они устроены.