Laravel 422 (Unprocessable Entity) while records are matching

Question

I have a Laravel back-end and Vue front-end. In my login component I make an axios call to my login web route:

    window.axios.defaults.headers.common = {
                'X-Requested-With': 'XMLHttpRequest',
                'X-CSRF-TOKEN' : document.querySelector('meta[name="csrf-token"]').getAttribute('content')
            };

           axios
                .post('/login', this.$data.loginForm)
                .then(response => {
                    console.log(response);
                })
                .catch(error => {
                    console.error(error);
                });

When I log the form data I see the following:

email: john@example.com
password: password

It is the right format to send it to the LoginController because I use it the same way in my working RegisterController / Register component. Also the credentials are matching the records in the database. However, I am getting this error:

POST http://127.0.0.1:8000/login 422 (Unprocessable Entity)

When I look why it is giving me this error it says:

{message: "The given data was invalid.",…}
  errors: {email: ["These credentials do not match our records."]}
    email: ["These credentials do not match our records."]
      0: "These credentials do not match our records."
  message: "The given data was invalid."

So I tried looking what the request sends to the controller by overriding the default method from the AuthenticatesUsers trait by doing this:

 protected function credentials(Request $request)
    {
        dd($request);
    }

which also returns:

email: john@example.com
password: password

The same as the records in the database.. why does Laravel still give me this error if the credentials are the same as in the database? The register component does create a user with the default RegisterController, and I send data the same way for logging in as I did for registering. Could someone explain to me why it keeps saying this?

Update:

This is my User model:

<?php

namespace App;

use Illuminate\Notifications\Notifiable;
use Illuminate\Contracts\Auth\MustVerifyEmail;
use Illuminate\Foundation\Auth\User as Authenticatable;

class User extends Authenticatable
{
    use Notifiable;

    /**
     * The attributes that are mass assignable.
     *
     * @var array
     */
    protected $fillable = [
        'name', 'email', 'password',
    ];

    /**
     * The attributes that should be hidden for arrays.
     *
     * @var array
     */
    protected $hidden = [
        'password', 'remember_token',
    ];

    /**
     * The attributes that should be cast to native types.
     *
     * @var array
     */
    protected $casts = [
        'email_verified_at' => 'datetime',
    ];
}

And here my full LoginController:

<?php

namespace App\Http\Controllers\Auth;

use App\Http\Controllers\Controller;
use Illuminate\Foundation\Auth\AuthenticatesUsers;
use Illuminate\Http\Request;

class LoginController extends Controller
{
    /*
    |--------------------------------------------------------------------------
    | Login Controller
    |--------------------------------------------------------------------------
    |
    | This controller handles authenticating users for the application and
    | redirecting them to your home screen. The controller uses a trait
    | to conveniently provide its functionality to your applications.
    |
    */

    use AuthenticatesUsers;

    /**
     * Where to redirect users after login.
     *
     * @var string
     */
    protected $redirectTo = '/';

    /**
     * Create a new controller instance.
     *
     * @return void
     */
    public function __construct()
    {
        $this->middleware('guest')->except('logout');
    }

//    protected function credentials(Request $request)
//    {
//        dd($request);
//    }
}