422 error while trying to make a request to API with nuxtjs and axios

I am new to VueJS and I'm trying to communicate with an API that I made with FastAPI.
The request to register is working well, but I'm trying to authenticate and I still getting an 422 Unprocessable Entity error.
I checked with a console.log that axios is sending the good data and that it's fine but I can't find a solution to my problem.

login.vue

<template>
  <section class="section">
    <div class="container">
      <div class="columns">
        <div class="column is-4 is-offset-4">
          <h2 class="title has-text-centered">Welcome back!</h2>

          <Notification :message="error" v-if="error"/>

          <form method="post" @submit.prevent="login">
            <div class="field">
              <label class="label">username</label>
              <div class="control">
                <input
                  type="username"
                  class="input"
                  name="username"
                  v-model="data.username"
                />
              </div>
            </div>
            <div class="field">
              <label class="label">Password</label>
              <div class="control">
                <input
                  type="password"
                  class="input"
                  name="password"
                  v-model="data.password"
                />
              </div>
            </div>
            <div class="control">
              <button type="submit" class="button is-dark is-fullwidth">Log In</button>
            </div>
          </form>
          <div class="has-text-centered" style="margin-top: 20px">
            <p>
              Don't have an account? <nuxt-link to="/register">Register</nuxt-link>
            </p>
          </div>
        </div>
      </div>
    </div>
  </section>
</template>

<script>
import Notification from '~/components/Notification'

export default {
  components: {
    Notification,
  },

  data() {
    return {
      data:{
      username: '',
      password: '',
      error: null
    }
    }
  },

  methods: {
    async login() {
      try {
        console.log(this.data)
        await this.$axios.post('auth', {
          data: {
          username: this.username,
          password: this.password
          }
        })

        this.$router.push('/')
      } catch (e) {
        this.error = e.response.data.message
      }
    }
  }
}
</script>

nuxt.config.js

export default {
  head: {
    title: 'frontend',
    htmlAttrs: {
      lang: 'en',
    },
    meta: [
      { charset: 'utf-8' },
      { name: 'viewport', content: 'width=device-width, initial-scale=1' },
      { hid: 'description', name: 'description', content: '' },
      { name: 'format-detection', content: 'telephone=no' },
    ],
    link: [{
      rel: 'stylesheet',
      href: 'https://cdnjs.cloudflare.com/ajax/libs/bulma/0.7.1/css/bulma.min.css'
    }],
  },

  components: true,
  modules: [
    // https://go.nuxtjs.dev/bootstrap
    'bootstrap-vue/nuxt',
    // https://go.nuxtjs.dev/axios
    '@nuxtjs/axios',
    '@nuxtjs/auth'
  ],

  axios: {
    // Workaround to avoid enforcing hard-coded localhost:3000: https://github.com/nuxt-community/axios-module/issues/308
    baseURL: 'http://127.0.0.1:8000',
  },
  auth: {
    strategies: {
      local: {
        endpoints: {
          auths: { url: 'auth', method: 'post', propertyName: 'data.token' },
          user: { url: 'user', method: 'post', propertyName: 'data' },
          logout: false
        }
      }
    }
  }
}

Here is the request that I try to join

@app.post("/auth")
async def generate_token(form_data: _security.OAuth2PasswordRequestForm = fastapi.Depends(),
                         db: _orm.Session = fastapi.Depends(_services.get_db)):
    user = await _services.authenticate_user(email=form_data.username, password=form_data.password, db=db)

    if not user:
        raise _ErrorSchemas.ApiException(message="Not found")
    token = await _services.create_token(user=user, db=db)
    return _schemas.TokenReturn(data=token)

I probably made some errors, I am new to web programming. Do not hesitate to correct me if I did bad things!
I probably did some on the JWT.

Here is the object containing the data that I got with the console.log()

{__ob__: Observer}
error: (...)
password: "string6"
username: "string6"

Here is the entire body of the error, i dont get it, i actually send the data..

{ "detail": [ { "loc": [ "query", "username" ], "msg": "field required", "type": "value_error.missing" }, { "loc": [ "query", "password" ], "msg": "field required", "type": "value_error.missing" } ] }