tengo un error que dice

TypeError no capturado: no se puede convertir indefinido o nulo en objeto

iEs mi primera vez en javascript. ¿Cuál es el problema con este código?

 <template> <div class="container my-5"> <div class="row justify-content-center"> <div class="col-5"> <div class="card rounded shadow"> <div class="card-header"> <p>Login YukPilih App</p> </div> <div class="card-body"> <form @submit.prevent="userLogin()"> <div class="mb-3"> <label for="username" class="form-label">Username</label> <input type="text" class="form-control" id="username" v-model="username"> </div> <div class="mb-3"> <label for="password" class="form-label">Password</label> <input type="password" class="form-control" id="password" v-model="password"> </div> <button type="submit" class="btn btn-primary" name="login">Login</button> </form> </div> </div> </div> </div> </div> </template> <script> import axios from 'axios' export default{ data(){ return{ username: null, password: null } }, methods: { userLogin: function(){ axios.post('http://localhost:8000/api/auth/login',{ username: this.username, password: this.password }) .then(res => { console.log(res) }) .catch(err => { console.log(err) }) } } } </script>