Initialize server side multi-column sorting in Laravel Inertia Vue

I am trying to create server side sorting, in Laravel Inertia Vue. It will work as multi-column sorting , currently I am unable to imply it in the project. It was a matter of minutes, when was using Livewire stack. But, incase of Inertia Vue, unable to re-create it. Please help me someone! Waiting for the revert.

This is what I have done so far, This is what I have done so far,

Route

Route::put('/users/{column}', [UserController::class, 'sortBy'])->name('users.set-field');

Controller

class UserController extends Controller 
{
    public $sorts = [];

    public function index(Request $request) {
        $rowsQuery = User::query()->select('id', 'name', 'email', 'created_at')
                                  ->withRole();

        $rows = $this->applySorting($rowsQuery);

        return Inertia::render('Backend/Management/AudienceManagement/Users/Index', [
            'usersData' => $query,
            'sortingData' => $this->sorts
        ]);
    }

    public function sortBy($column) {
        if (! isset($this->sorts[$column])) return $this->sorts[$column] = 'asc';
        if ($this->sorts[$column] === 'asc') return $this->sorts[$column] = 'desc';
        unset($this->sorts[$column]);
    }

    public function applySorting($query) {
        foreach($this->sorts as $column => $direction) {
            $query->orderBy($column, $direction);
        }
        return $query;
    }
}

Component

<template>
    <!-- Data Table -->
    <data-table-base>
        <template #head>
            <data-table-heading class="pr-0">ID</data-table-heading>
            <data-table-heading sortable :direction="sorts['name'] ?? null" @click="sortBy('name')">Name</data-table-heading>
            <data-table-heading>Email</data-table-heading>
            <data-table-heading>Role</data-table-heading>
            <data-table-heading sortable :direction="sorts['created_at'] ?? null" @click="sortBy('created_at')">Date</data-table-heading>
        </template>
    </data-table-base>
</template>

<script>
    import DataTableBase from '@/Components/Custom/Table/Base'
    import DataTableHeading from '@/Components/Custom/Table/Heading'
    import axios from 'axios'

    export default {
        components: {
            DataTableBase,
            DataTableHeading
        },

        props: {
            usersData: {
                type: Object
            },
            sortingData: {
                type: Array
            }
        },

        data() {
            return {
                sorts: this.sortingData
            }
        },

        methods: {
            sortBy(column) {
                axios.put(this.route('users.set-field', {
                    column: column
                })).then((response) => {
                    console.log(response);
                });
            }
        }
    }
</script>

Is the above approach correct? Am I following in the right direction? If yes, how should I go ahead with it. Please help someone.