How to connect API with vue.js - vue.js

Question

I have a small problem, don't understand how to connect the frontend and backend so email and password are verified from the database. I have programmed this in Vue.js for Login and Register page. And now I need to connect it with API so data is verified from the database and it is hard quite hard for me to understand it because I am learning Vue now.
<template>
<v-app id="inspire">
<v-content>
<v-container class="fill-height" fluid>
<v-row align="center" justify="center">
<v-col cols="12" sm="8" md="8">
<v-card class="elevation-12">
<v-window v-model="step">
<v-window-item :value="1">
<v-row>
<v-col cols="12" md="8">
<v-card-text class="mt-12">
<div>
<section>
<iframe width="600" height="315" src="https://www.youtube.com/embed/ebuUqH4ZVUQ" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
</section>
</div>
<h1
class="text-center display-2 teal--text text--accent-3"
>Sign in to Tetris</h1>
<h4 class="text-center mt-4">Ensure your email for registration</h4>
<v-form>
<v-text-field
label="Email"
name="Email"
prepend-icon="email"
type="text"
color="teal accent-3"
/>
<v-text-field
id="password"
label="Password"
name="password"
prepend-icon="lock"
type="password"
color="teal accent-3"
/>
</v-form>
</v-card-text>
<div class="text-center mt-3">
<v-btn rounded color="teal accent-3" dark>SIGN IN</v-btn>
</div>
</v-col>
<v-col cols="12" md="4" class="teal accent-3">
<v-card-text class="white--text mt-12">
<h1 class="text-center display-1">Hello, Friend!</h1>
<h5
class="text-center"
>Enter your personal details and start journay with us</h5>
</v-card-text>
<div class="text-center">
<v-btn rounded outlined dark #click="step++">SIGN UP</v-btn>
</div>
</v-col>
</v-row>
</v-window-item>
<v-window-item :value="2">
<v-row class="fill-height">
<v-col cols="12" md="4" class="teal accent-3">
<v-card-text class="white--text mt-12">
<h1 class="text-center display-1">Welcome Back!</h1>
<h5
class="text-center"
>To Keep connected with us please login with your personnel info</h5>
</v-card-text>
<div class="text-center">
<v-btn rounded outlined dark #click="step--">Sign in</v-btn>
</div>
</v-col>
<v-col cols="12" md="8">
<v-card-text class="mt-12">
<h1 class="text-center display-2 teal--text text--accent-3">Create Account</h1>
<h4 class="text-center mt-4">Ensure your email for registration</h4>
<v-form>
<v-text-field
label="Name"
name="Name"
prepend-icon="person"
type="text"
color="teal accent-3"
/>
<v-text-field
label="Email"
name="Email"
prepend-icon="email"
type="text"
color="teal accent-3"
/>
<v-text-field
id="password"
label="Password"
name="password"
prepend-icon="lock"
type="password"
color="teal accent-3"
/>
</v-form>
</v-card-text>
<div class="text-center mt-n5">
<v-btn rounded color="teal accent-3" dark>SIGN UP</v-btn>
</div>
</v-col>
</v-row>
</v-window-item>
</v-window>
</v-card>
</v-col>
</v-row>
</v-container>
</v-content>
</v-app>
</template>
<script>
export default {
data: () => ({
step: 1
}),
props: {
source: String
}
};
</script>

Answer 1

I think you need to know what is client, server and how they work via the HTTP protocol in the case you mentioned.
Then, search the documentation, you could find the usage code.