Is it possible to nest a Livewire 3 component independently inside of a form?

Question

I've got a long-running Laravel app with a traditional form in a blade view. Inside of this form I want to start to include a couple Livewire components that can refresh and submit data independent of the form. Is this possible?

For testing purposes I've created this simple component and nested it within the existing <form> on the page..

<div>
    Time: {{ time() }}
    <button wire:click="$refresh">Refresh</button>
</div>

But, clicking the button doesn't refresh the component, and instead submits the form.

Answer 1

I figured out there are 2 ways to do this.

1. As @Pippo suggested in the comments:

<button wire:click.prevent="$refresh">Refresh</button>

2. Having the type property set to button:

<button type="button" wire:click="$refresh">Refresh</button>