Error with Axios Vuejs 3 and Fast API JWT

Question

Hi I am trying to send the username and password to get the token I am doing this with JWT, if I use postman it works and if I send the username and password with the fast api docs it works, but if I use the form login created in Vuejs 3 it does not work I wonder why?

It displays this error: ["query", "username"], msg: "field required", type: "value_error.missing"} same for password the vuejs code:

   export default {
    data() {
      return {
    username: '',
    password: '',
    accessToken: '',
  };
 ,
 methods: {
  login() {
   const data = {
    username: this.username,
    password: this.password,
  };

  axios.post('http://127.0.0.1:8000/login_users/token', data)
    .then(response => {
      // Manejar la respuesta exitosa
      this.accessToken = response.data.access_token;

      // Guardar el token en el almacenamiento local (localStorage)
      localStorage.setItem('accessToken', this.accessToken);
    })
    .catch(error => {
      // Manejar el error
      console.error('Error al iniciar sesión:', error);
    });
},
},
};

The Fast API code:

      @login_users.post("/token")
       def login(form_data: OAuth2PasswordRequestForm = Depends(), db: Session = Depends(get_db)):
        print("Username:", form_data.username)
        user = AuthenticationClass(db).authenticate_user(form_data.username, form_data.password)
        access_token_expires = timedelta(minutes=30)
        access_token_jwt = AuthenticationClass(db).create_token({'sub': str(user.rut)}, access_token_expires)

      return {
           "access_token": access_token_jwt, 
           "rut": user.rut,
          "visual_rut": user.visual_rut,
          "rol_id": user.rol_id,
           "nickname": user.nickname,
          "token_type": "bearer"
      }

I wonder where is the error? I look good, but it says like I do not send username and password but I send it. My inputs are:

       <input
                type="text"
                id="username"
                class="bg-white-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500"
                placeholder="RUT"
                required
                v-model="username"
                />

       <input
                type="password"
                id="password"
                class="bg-white-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500"
                placeholder="Contraseña"
                required
                v-model="password"
                />

I checked them with console.log() and they are coming... help please. Thanks.