Livewive, how to stop a part of the component refreshing

In the modal, when clicking for the edit student, I want to use . Especially the variable, to keep the variable count to a minimum. But I have this problem where the table is refreshing on the click event which is causing the variable to fill which is undesirable.

I know I can create another var and just use this but I want to keep the code looking as clean as possible.

<div>
    {{-- Success is as dangerous as failure. --}}
    <div class="row mb-3">
        <button type="button" class="btn btn-outline-success w-15 h-10 shadow" data-bs-toggle="modal"
            data-bs-target="#studentCreateModal"><i class="fa-solid fa-circle-plus fa-2xl"></i></button>
    </div>
    <div class="row">
        <table class="table mt-4">
            <thead>
                <tr>
                    <th scope="col">#</th>
                    <th scope="col">Originate</th>
                    <th scope="col">Forename</th>
                    <th scope="col">Surname</th>
                    <th scope="col">Gender</th>
                    <th scope="col">Handle</th>
                </tr>
            </thead>
            <tbody>
                @foreach ($students as $student)
                    <tr>
                        <th scope="row" class="align-middle">{{ $student->id }}</th>
                        <td class="align-middle">{{ $student->contact->forename }}</td>
                        <td class="align-middle">{{ $student->forename }}</td>
                        <td class="align-middle">{{ $student->contact->surname }}</td>
                        <td class="align-middle">{{ $student->gender }}</td>
                        <td>
                            <button wire:click="show('{{ $student->id }}')" type="button" class="btn btn-outline-warning shadow" data-bs-toggle="modal"
                                data-bs-target="#studentEditnModal"><i class="fa-solid fa-pencil"></i></button>
                            <button type="button" class="btn btn-outline-danger shadow"><i class="fa-solid fa-eraser"></i></button>
                        </td>
                    </tr>
                @endforeach
            </tbody>
        </table>
    </div>

    {{-- Modal: Edit Student --}}
    <form wire:submit.prevent="update('{{ $student->id }}')">
        <div class="modal fade" id="studentEditnModal" tabindex="-1" aria-labelledby="exampleModalLabel"
            aria-hidden="true" wire:ignore.self>
            <div class="modal-dialog">
                <div class="modal-content">
                    <div class="modal-header">
                        <h5 class="modal-title" id="exampleModalLabel">Edit Student</h5>
                        <button type="button" class="btn-close" data-bs-dismiss="modal"
                            aria-label="Close"></button>
                    </div>
                    <div class="modal-body">
                        <div class="form-floating">
                            <select wire:model.defer="contact" class="form-select" id="floatingSelect"
                                aria-label="Floating label select example">
                                <option selected>Open this select menu</option>
                                @foreach ($contacts as $index => $contact)
                                    <option value="{{ $contact->id }}">{{ $contact->forename }}
                                        {{ $contact->surname }}</option>
                                @endforeach
                            </select>
                            <label for="floatingSelect">Contact account link</label>
                            @error('contact')
                                <span class="text-danger">{{ $message }}</span>
                            @enderror
                        </div>
                        <div class="form-floating">
                            <input wire:model.defer="forename" type="text" class="form-control my-2"
                                id="floatingInputForename" placeholder="">
                            <label for="floatingInputForename">Forename</label>
                            @error('forename')
                                <span class="text-danger">{{ $message }}</span>
                            @enderror
                        </div>
                        <div class="form-floating">
                            <select wire:model.defer="gender" class="form-select" id="floatingSelect"
                                aria-label="Floating label select example">
                                <option selected>Open this select menu</option>
                                <option value="M">M</option>
                                <option value="F">F</option>
                            </select>
                            <label for="floatingSelect">Gender?</label>
                            @error('gender')
                                <span class="text-danger">{{ $message }}</span>
                            @enderror
                        </div>
                        @if ($alert)
                            <p class="mt-2 text-center text-danger">{{ $alert }}</p>
                        @endif
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
                        <button type="submit" class="btn btn-primary" data-bs-dismiss="modal">Save changes</button>
                    </div>
                </div>
            </div>
        </div>
    </form>

    {{-- Modal: Store Student --}}
    <form wire:submit.prevent="store">
        <div class="modal fade" id="studentCreateModal" tabindex="-1" aria-labelledby="exampleModalLabel"
            aria-hidden="true" wire:ignore.self>
            <div class="modal-dialog">
                <div class="modal-content">
                    <div class="modal-header">
                        <h5 class="modal-title" id="exampleModalLabel">Create Student</h5>
                        <button type="button" class="btn-close" data-bs-dismiss="modal"
                            aria-label="Close"></button>
                    </div>
                    <div class="modal-body">
                        <div class="form-floating">
                            <select wire:model.defer="contact" class="form-select" id="floatingSelect"
                                aria-label="Floating label select example">
                                <option selected>Open this select menu</option>
                                @foreach ($contacts as $index => $contact)
                                    <option value="{{ $contact->id }}">{{ $contact->forename }} {{ $contact->surname }}</option>
                                @endforeach
                            </select>
                            <label for="floatingSelect">Contact account link</label>
                            @error('contact')
                                <span class="text-danger">{{ $message }}</span>
                            @enderror
                        </div>
                        <div class="form-floating">
                            <input wire:model.defer="forename" type="text" class="form-control my-2" id="floatingInputForename" placeholder="">
                            <label for="floatingInputForename">Forename</label>
                            @error('forename')
                                <span class="text-danger">{{ $message }}</span>
                            @enderror
                        </div>
                        <div class="form-floating">
                            <select wire:model.defer="gender" class="form-select" id="floatingSelect"
                                aria-label="Floating label select example">
                                <option selected>Open this select menu</option>
                                <option value="M">M</option>
                                <option value="F">F</option>
                            </select>
                            <label for="floatingSelect">Gender?</label>
                            @error('contact')
                                <span class="text-danger">{{ $message }}</span>
                            @enderror
                        </div>
                        @if ($alert)
                            <p class="mt-2 text-center text-danger">{{ $alert }}</p>
                        @endif
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
                        <button type="submit" class="btn btn-primary" data-bs-dismiss="modal">Save changes</button>
                    </div>
                </div>
            </div>
        </div>
    </form>
</div>