Vlad_Murashchenko

Оставьте текстовым полем, не нужно никаких масок. На onBlur + onSubmit проверяйте что это корректный имейл или телефон, если ни одного ни другое показывайте ошибку. Это самое простое решение и его вам скорее всего будет достаточно.

Можно добавить проверку во время ввода и которая будет проверять 2 случая сразу.
1) введённые данные не подходит ни для одного ни для второго
2) уже понятно, что это имейл, валидируем как имейл (в случае есть какая-то буква или @)

Я также рекомендую вам использовать какое-то готовое решение для валидации, например vuelidate, чтобы оставить код декларативным и поддерживаемым. Однако в скором времени я планирую написать туториал о декларативной валидации своими руками.

Решение которое предложил Дмитрий Беляев будет сложно поддерживать в проекте, хотя оно действительно решает задачу именно так как она была поставлена.

Все просто.
1) состояние относится к какому-то конкретному компоненту, который сам несёт ответственность за CRUD с данным состоянием - используй локальное состояние.
Пример: список каких-то элементов, мы ведь не захотим отобразить или поработать с элементом из этого списка где-то в другой части приложения, это ведь бред какой-то, хотя дизайнеры могут придумать всякие. И если они придумают то прийдется подымать это состояние выше или выносить в глобальное.
2) если же состояние используется в разных компонентах которые не имеют прямого отношения друг к другу, тогда удобнее использовать глобальное состояние чтобы удобно внедрять его в нужные компоненты и предоставлять им интерфейс для работы с ним.
Пример: сервер предоставляет нам объект юзера в котором есть статус, имя, фотография, какие-то ещё данные. Статус отображается и редактируется в одном компоненте, имя с фотографией отображается в другом, а редактируется в какой-то вообще отдельной форме со своим состоянием. Здесь нам бы пришлось держать данное состояние где-то очень высоко и далеко от компонентов которые им управляют, глобальное состояние упрощает работу с подобными состояниями