Помощь с выводом данных через axios. И запись через fastify в бд

Дали задание сделать форму регистрации. Сказали нужно с помощью axios выполнить http-запрос на сервер fastify и записать это в бд с помощью sql-запроса. Я новичок и особо ничего не понимаю, смог сделать только часть а дальше не идёт. Было бы круто, если бы вы смогли помочь хотя бы с частью кода, а лучше всего если получиться объяснить как это работает. Или покидать ссылок с ютуба, для обучения.

<template>

    <div class="form">
      <h1 class="form__title">{{ formTitle }} / <a href="#" class="form__link" @click="toggleForm">{{ formButton }}</a></h1>
      <div v-if="!isRegistrationForm">

        <div class="form__group">
          <input class="form__input" placeholder=" " v-model.trim="email" @blur="validateEmail" id="email-user">
          <label class="form__label">Email</label>
          <span v-if="emailError" class="form__error">{{ emailError }}</span>
        </div>

        <div class="form__group">
          <input class="form__input" placeholder=" " type="password" v-model.trim="password" @blur="validatePassword" id="password-user">
          <label class="form__label">Пароль</label>
          <span v-if="passwordError" class="form__error">{{ passwordError }}</span>
        </div>

        <div class="form__group">
          <input type="checkbox" class="form-check-input" id="exampleCheck1">
          <label class="form-check-label" for="exampleCheck1">Запомнить меня</label>
        </div>

        <div>
          <button type = 'sumbit' id = 'sumbit' class="form__button">Войти</button><a class="forgetpass" href="#">Забыли пароль?</a>
        </div>

      </div>

      <div v-else>

        <div class="form__group">
          <input class="form__input" placeholder=" " v-model.trim="name" @blur="validateName" id="name-user">
          <label class="form__label">Имя</label>
          <span v-if="nameError" class="form__error">{{ nameError }}</span>
        </div>

        <div class="form__group">
          <input class="form__input" placeholder=" " v-model.trim="email" @blur="validateEmail" @input="emailError = email ? '' : emailError">
          <label class="form__label">Email</label>
          <span v-if="emailError" class="form__error">{{ emailError }}</span>
        </div>
        
        <div class="form__group">
          <input class="form__input" placeholder=" " type="password" v-model.trim="password" @blur="validatePassword">
          <label class="form__label">Пароль</label>
          <span v-if="passwordError" class="form__error">{{ passwordError }}</span>
        </div>

        <div class="form__group">
          <input class="form__input" placeholder=" " type="password" v-model.trim="confirmPassword" @blur="validateConfirmPassword">
          <label class="form__label">Проверка пароля</label>
          <span v-if="confirmPasswordError" class="form__error">{{ confirmPasswordError }}</span>
        </div>

        <div>
          <button class="form__button">Зарегистрироваться</button>
        </div>

      </div>
    </div>
</template>

<script>
import axios from 'axios';
console.log(axios)

export default {
  data() {
    return {
      name: '',
      email: '',
      password: '',
      confirmPassword: ''
    };
  },
        computed: {
        formTitle() {
        return this.isRegistrationForm ? 'Регистрация' : 'Вход'
        },
        formButton() {
        return this.isRegistrationForm ? 'Вход' : 'Регистрация'
        }
    },
    methods: {
        toggleForm() {
        this.isRegistrationForm = !this.isRegistrationForm
        },
        validateName() {
        if (!this.name) {
            this.nameError = ' (Введите имя)'
        } else {
            this.nameError = ''
        }
        },
        validateEmail() {
        if (!this.email) {
            this.emailError = ' (Введите email)'
        } else if (!this.isValidEmail(this.email)) {
            this.emailError = ' (Некорректный email)'
        } else {
            this.emailError = ''
        }
        },
        validatePassword() {
        if (!this.password) {
            this.passwordError = ' (Введите пароль)'
        } else if (this.password.length < 6) {
            this.passwordError = ' (Пароль должен содержать не менее 6 символов)'
        } else {
            this.passwordError = ''
        }
        },
        validateConfirmPassword() {
        if (!this.confirmPassword) {
            this.confirmPasswordError = ' (Введите пароль еще раз)'
        } else if (this.confirmPassword !== this.password) {
            this.confirmPasswordError = ' (Пароли не совпадают)'
        } else {
            this.confirmPasswordError = ''
        }
        },
        isValidEmail(email) {
        const re = /\S+@\S+\.\S+/
        return re.test(email)
        }
    }
    }

</script>


// Стили6
<style>
body {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
}

.form {
    width: 400px;
    padding: 32px;
    border-radius: 10px;
    box-shadow: 0 4px 16px #ccc;
    font-family: 'Montserrat', sans-serif;
    letter-spacing: 0.5px;
}

.form__input,
.form__button {
    font-family: 'Montserrat', sans-serif;
    font-size: 16px;
    letter-spacing: 0.5px;
}

.form__title {
    text-align: left;
    margin: 0 0 32px 0;
    font-weight: normal;
}

.form__group {
    position:relative;
    margin-bottom: 32px;
}

.form__label {
    position: relative;
    top: 0;
    z-index: -1;
    color: #9e9e9e;
    transition: 0.3s;

}

.form__input {
    width: 100%;
    padding: 0 0 10px 0;
    border: none;
    border-bottom: 1px solid #e0e0e0;
    background-color: transparent;
    outline: none;
    transition: 0.3s;
}

.form__input:focus {
    border-bottom: 1px solid #1aa868;
}

.form__button {
    padding: 10px 20px;
    border: none;
    border-radius: 5px;
    color: white;
    background-color: #00d18f;
    outline: none;
    cursor: pointer;
    transition: 0.3s;
}

.form__button:focus,
.form__button:hover {
    background-color: #00a16e;
}

.form__link {
    font-weight: 500;
    text-decoration: none;
    color: darkgray;
    -webkit-transition: all .3s ease;
        transition: all .3s ease;
}

.form__link:hover {
    color:rgb(113, 113, 113);
}

.forgetpass {
    margin-left: 5%;
    font-weight: 500;
    text-decoration: none;
    color: darkgray;
    -webkit-transition: all .3s ease;
        transition: all .3s ease;
}

.forgetpass:hover {
    color:rgb(113, 113, 113);
    text-decoration: underline(0.3s);
}

.form__error {
  color: red;
}

.form__field.error input {
  border-color: red;
}

.form__field.error .form__error {
  color: red;
} 

</style>