Form submission and wire:model syncing not working correctly when component is inside conditional template tag

[ghost]

Description

I have multiple Livewire form components and want to conditionally display them inside a modal. This part is working fine, but since some of my forms use the same input ID attributes I want to use template tags so that only one form is actually rendered on the page at any one time.

I'm also using AlpineJS to leverage its x-if directive which conditionally renders each template tag depending on what form has been selected by the user.

As I said the modal form displays correctly but when I hit submit on the form the entire page reloads appending a question mark in the address bar - so my Livewire component's submit method is not being called, wire:model also no longer works as no XHRs are being sent to the server as I type.

Apologies if this is by design (or more likely I am misunderstanding something) and not considered a bug, or also if I should be posting on the AlpineJS repo instead.

Steps to reproduce

// main page (not a Livewire component) excerpt for modal inclusion
<x-modal>
    <template x-if="form === 'regForm'">
        <livewire:reg-form></livewire:reg-form>
    </template>

    <template x-if="form === 'loginForm'">
        <livewire:login-form></livewire:login-form>
    </template>
</x-modal>

// reg-form Livewire component blade
<div>
    <form wire:submit.prevent="submit">
        <!-- form fields omitted -->
        <div>
            <button type="submit">
                Submit
            </button>
        </div>
    </form>
</div>

Context

• Livewire version: 1.1.0
• Laravel version: 7.1.3
• Browser: Chrome