index.html

<!DOCTYPE html>
<html>
<head>
	<title>Exemplo de página HTML com Vue</title>
	<!-- Inclui o CDN do Vue -->
	<script src="https://unpkg.com/vue@next"></script>
</head>
<body>
    <main id="app">
        <form @submit.prevent="submitForm">
            <h1 class="texto-primario">LOGIN</h1>
            <label for="usuario">Usuário</label>
            <input v-model="usuario" type="text" id="usuario" name="usuario">
            <label for="senha">Senha</label>
            <input v-model="senha" type="password" id="senha" name="senha">
            <button>Logar</button>
        </form>

        <p>Logado? {{ logado }}</p>
    </main>


	<script>
		const app = Vue.createApp({
			data() {
				return {
					message: 'Este é um exemplo de mensagem do Vue',
                    usuario: 'luan',
                    senha: 'luan',
                    logado: false
				}
			},
            methods: {
                async submitForm() {
                try {
                    const response = await fetch('http://localhost:8000/auth/token/', {
                        method: 'POST',
                        mode:  'cors',
                        headers: {
                            'Content-Type': 'application/json'
                        },
                        body: JSON.stringify({
                            username: this.usuario,
                            password: this.senha
                        })
                    }).then((response => {
                        if(response.ok) {
                            this.logado = true
                        }
                    }))
                } catch(error) {
                    console.log(error)
                }
            }
            }
            
		})
		app.mount('#app')
	</script>
</body>
</html>