How to Print Laravel API Relationship data with Vue Js

working with Laravel 10 API and Vue Js 3. in My Application I have 3 Model Class like Employee, Title and Salary and Relationship like following way. Employee.php

<?php

namespace App\Models;

use Illuminate\Database\Eloquent\Factories\HasFactory;
use Illuminate\Database\Eloquent\Model;
use Illuminate\Database\Eloquent\Relations\HasMany;

class Employee extends Model
{
    use HasFactory;
    public $timestamps = false;

    protected $fillable = ['birth_date','first_name','last_name','gender','hire_date'];

    protected $primaryKey = 'emp_no';

    public function titles(): HasMany
    {
        return $this->hasMany(Title::class, 'emp_no','emp_no');
    }

    public function salaries(): HasMany
    {
        return $this->hasMany(Salary::class, 'emp_no','emp_no');
    }
}

Title.php

<?php

namespace App\Models;

use Illuminate\Database\Eloquent\Factories\HasFactory;
use Illuminate\Database\Eloquent\Model;
use Illuminate\Database\Eloquent\Relations\BelongsTo;

class Title extends Model
{
    use HasFactory;
    public $timestamps = false;


    protected $fillable = ['title','from_date','to_date'];


    public function employee(): BelongsTo
    {
        return $this->belongsTo(Employee::class, 'emp_no');
    }
}

Salary.php

<?php

namespace App\Models;

use Illuminate\Database\Eloquent\Factories\HasFactory;
use Illuminate\Database\Eloquent\Model;
use Illuminate\Database\Eloquent\Relations\BelongsTo;

class Salary extends Model
{
    use HasFactory;
    protected $fillable = ['salary','from_date','to_date'];

    public function employee(): BelongsTo
    {
        return $this->belongsTo(Employee::class, 'emp_no');
    }
}

I have following EmployeeController.php

<?php
namespace App\Http\Controllers;

use Illuminate\Http\Request;
use App\Models\Employee;
use App\Models\Title;
use App\Models\Salary;

class EmployeeController extends Controller
{
    public function employees(){
        
            return response()->json(Employee::with('titles','salaries')->get(), 200);
    }
      
}

and api.php

Route::get('employees', [App\Http\Controllers\EmployeeController::class, 'employees']);

and My frontend EmployeeList.vue is

<template>
    <div class="container">
        <table class="table table-hover">
            <thead>
                <tr>
                    <th scope="col">#</th>
                    <th scope="col">First Name</th>
                    <th scope="col">Last Name</th>
                    <th scope="col">Birth Date</th>
                    <th scope="col">Gender</th>
                    <th scope="col">Hire Date</th>
                </tr>
            </thead>

            <tbody v-for="employee in employees" :key="employee.emp_no">
                <tr class="table-secondary">
                    <th scope="row">{{ employee.emp_no }}</th>
                    <th scope="row">{{ employee.first_name }}</th>
                    <th scope="row">{{ employee.last_name }}</th>
                    <th scope="row">{{ employee.birth_date }}</th>
                    <th scope="row">{{ employee.gender }}</th>
                    <th scope="row">{{ employee.hire_date }}</th>
                   
                </tr>
            </tbody>
        </table>
        
    </div>
</template>

<script>
    import axios from 'axios';
    export default {
        name:'EmployeeList',
        data() {
            return {
                employees:Array
            }
        },
        created() {
            this.getEmployees();
        },
        methods:{
            async getEmployees() {
                let url = 'http://127.0.0.1:8000/api/employees';
                await axios.get(url).then(response => {
                    this.employees = response.data.employees;
                    console.log(this.employees);
                }).catch(error => {
                    console.log(error)
                });
            }
        
        
        },
        mounted() {
            console.log('Employee List Component Mounted');
        }
    }
</script>

but in My EmployeeList.vue did not display table data. but only web browser inspect displaying Employee Array and Other Models data. How could I fix this problem? is this controller function problem here?