Всё работает так,
как и должно. Чтобы получить требуемое поведение, надо обрабатывать другие события:
@mouseenter="showDrop = true"
@mouseleave="showDrop = false"
UPD. А зачем два свойства для управления отображением форм? Они что, могут показываться одновременно? Может, лучше сделать одно свойство, которое будет содержать имя показываемой формы? Как-то так:
data: () => ({
showForm: 'auth',
// ...
}),
Форма авторизации:
v-show="showForm === 'auth'",
@click="showForm = 'reg'".
Форма регистрации:
v-show="showForm === 'reg'",
@click="showForm = 'auth'".
