Vue.js , кнопка type="reset" сбрасывает даже checked атрибуты

Делаю калькулятор калорий (первый проект на Вью 3), специально разбил форму на несколько компонентов для изучения их взаимодействия. Обнаружил проблему: странная работа кнопки "Очистить поля и расчёт", которая по факту инпут с типом "ресет". Она должна сбрасывать все поля формы к состоянию по-умолчанию. Так и происходило, когда я делал этот проект на чистом JS, без использования Вью 3. Но с Вью 3 по какой-то причине по нажатию этой кнопки сбрасываются вообще все поля, хотя по-умолчанию атрибут "checked" выставлен на инпуте "Мужчина" и инпуте "Минимальная" в разделе "физическая активность", и кнопка "ресет" должна сбрасывать форму именно к ним. В чём может быть причина такого поведения ресета и как поправить? Пример инпутов в FormActivity (Мужчина\Женщина):

<template>
    <div class="form__item">
        <h2 class="heading">Пол</h2>
        <ul class="switcher">
            <li class="switcher__item">
                <input
                    @click="emitPhysStats"
                    id="gender-male"
                    name="gender"
                    value="male"
                    type="radio"
                    checked
                    required
                />
                <label for="gender-male">Мужчина</label>
            </li>
            <li class="switcher__item">
                <input
                    @click="emitPhysStats"
                    id="gender-female"
                    name="gender"
                    value="female"
                    type="radio"
                    required
                />
                <label for="gender-female">Женщина</label>
            </li>
        </ul>
    </div> 

Реализация кнопки "Очистить", компонент FormSubmit:

    <div class="form__submit">
        <button
            @click.prevent="count"
            class="form__submit-button button"
            name="submit"
            type="submit"
            ref="calcBtn"
            disabled
        >
            Рассчитать
        </button>
        <button
            class="form__reset-button"
            name="reset"
            type="reset"
            :disabled="clearBtnDisabled"
        >
            <svg
                width="24"
                height="24"
                viewbox="0 0 24 24"
                fill="#FD3636"
                xmlns="http://www.w3.org/2000/svg"
            >
                <path
                    fill-rule="evenodd"
                    clip-rule="evenodd"
                    d="M13.4143 12.0002L18.7072 6.70725C19.0982 6.31625 19.0982 5.68425 18.7072 5.29325C18.3162 4.90225 17.6842 4.90225 17.2933 5.29325L12.0002 10.5862L6.70725 5.29325C6.31625 4.90225 5.68425 4.90225 5.29325 5.29325C4.90225 5.68425 4.90225 6.31625 5.29325 6.70725L10.5862 12.0002L5.29325 17.2933C4.90225 17.6842 4.90225 18.3162 5.29325 18.7072C5.48825 18.9022 5.74425 19.0002 6.00025 19.0002C6.25625 19.0002 6.51225 18.9022 6.70725 18.7072L12.0002 13.4143L17.2933 18.7072C17.4882 18.9022 17.7443 19.0002 18.0002 19.0002C18.2562 19.0002 18.5122 18.9022 18.7072 18.7072C19.0982 18.3162 19.0982 17.6842 18.7072 17.2933L13.4143 12.0002Z"
                />
            </svg>
            <span> Очистить поля и расчёт </span>
        </button>
    </div>
</template>