Запретить отправку формы запускает форму закрытия

Question

У меня проблема: у меня есть небольшое пользовательское меню, которое отображается для входа в систему. Чтобы обработать внешние щелчки, чтобы снова закрыть меню, я реализовал этот маленький помощник:

<on-click-outside :do="handleClickOutside">
    <Login/>
</on-click-outside>

это вызывает

 handleClickOutside () {
 if (this.open) {
  this.open = false;
  }
},

Хорошо. Это компонент:

<script>
    export default {
        props: ["do"],
        mounted () {
            const listener = e => {
                if (e.target !== this.$el && !this.$el.contains (e.target)) {
                    this.do ();
                }
            };
            document.addEventListener ("click", listener);
            this.$once ("hook:destroyed", () => {
                document.removeEventListener ("click", listener);
            });
        },
        render () {
            return this.$slots.default[0];
        }
    };
</script>

Это работает нормально, но если я войду таким образом:

<ValidationObserver ref="loginform" v-if="!authenticated">
<form v-on:submit.prevent>
...
<button
    :class="{'btn shadow-lg sm:text-base': true, 'opacity-50 cursor-not-allowed': $wait.is('user.login')}"
    @click.prevent="login">
    Login
</button>

</form>
</ValidationObserver>

Метод handleClickOutside запускается, а форма входа не видимый. Есть идеи, почему это происходит?