Laravel with VueJS 500 (Internal Server Error) - laravel

Question

I have the issue when I fetch states with VueJs.
getStates(){
axios.get("/api/employees/"+ this.form.country_id + "/states")
.then(res => {
this.states = res.data
}).catch(error => {
console.error(error.response.data)
})
}
This api.php .
<?php
use App\Http\Controllers\Api\EmployeeDataController;
use Illuminate\Http\Request;
use Illuminate\Support\Facades\Route;
Route::get('/employees/countries', [EmployeeDataController::class, 'countries']);
Route::get('/employees/{country}/states', [EmployeeDataController::class, 'states']);
Route::get('/employees/departments', [EmployeeDataController::class, 'departments']);
Route::get('/employees/{state}/cities', [EmployeeDataController::class, 'cities']);
This is EmployeeDataController contains:
public function states(Country $country)
{
return response()->json($country->states);
}
This is country model:
<?php
namespace App\Models;
use Illuminate\Database\Eloquent\Factories\HasFactory;
use Illuminate\Database\Eloquent\Model;
class Country extends Model
{
use HasFactory;
protected $fillable = ['country_code', 'name'];
public function states()
{
return $this->hasMany(States::class);
}
}
This is create.vue blade which I store datas.
<div class="row mb-3">
<label for="country" class="col-md-4 col-form-label text-md-end">Country</label>
<div class="col-md-6">
<select v-model="form.country_id" #change="getStates()" name="country" class="form-control" aria-label="Default select example">
<option v-for="country in countries" :key="country.id" :value="country.id">{{country.name}}</option>
</select>
</div>
</div>
This create form that when I tapped select country, automatically state must fill with state data which I want to fetch.
But I have face to 500 internal server error
I hope to explain my issue.