Unable to print Laravel API data with Relationship in Vue Js

working with Laravel 10 API and Vue js 3 frontend

I have following EmployeeControll.php with 3 Models Employee,Title and Salary as well. Employee has many relationship with Salary and Title Models and Salary and Title Models has BelongsTo with Employee Model

<?php
namespace AppHttpControllers;

use IlluminateHttpRequest;
use AppModelsEmployee;
use AppModelsTitle;
use AppModelsSalary;

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

api.php

Route::get('employees', [AppHttpControllersEmployeeController::class, 'employees']);

and Vue js 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>

above code segment did not display any data on vue js EmployeeList page. but web browser inspect uncounted Employee Array data with Relationship Models data? how could I fix above matter (displaying data on EmployeeList)

following EmployeeController showing result on EmployeeList.vue page

<?php

namespace AppHttpControllers;

use IlluminateHttpRequest;
use AppModelsEmployee;
use AppModelsTitle;
use AppModelsSalary;

class EmployeeController extends Controller
{
    public function employees(){
        $employees = Employee::all();
        return response()->json(
            [
                'employees' => $employees,
                'message' => 'Employee',
                'code' => 200
            ]
            );
            
    }
       
}

but I need data with all relationship Models