Sample Vue code with custom components

Companies.vue

<template>
    <div class="flex flex-col p-6 bg-white rounded-20">
        <PTable :fetch-records="fetchAllCompanies"
            :columns="state.fields"
            :refresh-table-data="state.refreshTableData"
        >
            <template #header-content>
                <AddButton @clicked="state.isModalOpen = true">
                    Add New Company
                </AddButton>
            </template>

            <template #logo="record">
                <img :src="record.data.logo_url" :alt="record.data.name" width="70">
            </template>

            <template #country="record">
                {{ record.data.country.name }}
            </template>

            <template #state="record">
                {{ record.data.state.name }}
            </template>

            <template #actions="record">
                <div class="flex item-center justify-center">
                    <div class="transform hover:text-purple-500 hover:scale-110">
                        <ListButton title="Manage E-commerce Online Store"
                            @clicked="editEcommerce(record.data)"
                        />
                    </div>

                    <div class="ml-2 transform hover:text-purple-500 hover:scale-110">
                        <RoundOffButton title="Manage Round Off Configuration"
                            @clicked="editRoundOff(record.data)"
                        />
                    </div>

                    <div class="ml-2 transform hover:text-purple-500 hover:scale-110">
                        <EditButton title="Edit Company"
                            @clicked="editCompany(record.data.id)"
                        />
                    </div>

                    <div class="ml-2 transform hover:text-purple-500 hover:scale-110">
                        <DeleteButton title="Delete Company"
                            @clicked="confirmDeleteCompany(record.data.id, record.data.name, refreshTable)"
                        />
                    </div>
                </div>
            </template>
        </PTable>
    </div>

    <ManageCompany
        v-model:is-display-modal="state.isModalOpen"
        v-model:company-id="state.companyId"
        @refresh-table="refreshTable"
    />

    <ManageRoundOff
        v-model:is-display-modal="state.isRoundOffModalOpen"
        :company-id="state.roundOffCompanyId"
        :company-name="state.roundOffCompanyName"
    />

    <ManageEcommerce
        v-model:is-display-modal="state.isEcommerceModalOpen"
        v-model:is-change-password="state.isChangePassword"
        v-model:company-id="state.eCompanyId"
        v-model:company-name="state.eCompanyName"
    />
</template>

<script setup>
import {
    fetchAllCompanies,
    confirmDeleteCompany
} from '@adminApiRequests/company';
import ManageCompany from '@adminPages/setup/partials/ManageCompany.vue';
import ManageEcommerce from '@adminPages/setup/partials/ManageEcommerce.vue';
import ManageRoundOff from '@adminPages/setup/partials/ManageRoundOff.vue';
import AddButton from '@commonComponents/AddButton.vue';
import DeleteButton from '@commonComponents/DeleteButton.vue';
import EditButton from '@commonComponents/EditButton.vue';
import ListButton from '@commonComponents/ListButton.vue';
import RoundOffButton from '@commonComponents/RoundOffButton.vue';
import PTable from '@commonComponents/PTable.vue';
import { reactive } from '@vue/reactivity';

const state = reactive({
    isModalOpen: false,
    isEcommerceModalOpen: false,
    isRoundOffModalOpen: false,
    isChangePassword: false,
    companyId: null,
    eCompanyId: null,
    eCompanyName: null,
    roundOffCompanyId: null,
    roundOffCompanyName: null,
    fields: [
        {
            key: 'logo',
        },{
            key: 'name',
            sortable: true,
        }, {
            key: 'code',
            sortable: true,
        }, {
            key: 'email',
            sortable: true,
        }, {
            key: 'country',
            sortable: true,
        }, {
            key: 'state',
            sortable: true,
        }, {
            key: 'actions',
            class: 'py-4 px-6 text-center',
        }
    ],
    refreshTableData: Math.random(),
});

const refreshTable = () => {
    state.refreshTableData = Math.random();
};

const editCompany = (editCompanyId) => {
    state.isModalOpen = true;
    state.companyId = editCompanyId;
};

const editEcommerce = (editCompany) => {
    state.isEcommerceModalOpen = true;
    state.isChangePassword = false;
    state.eCompanyId = editCompany.id;
    state.eCompanyName = editCompany.name;
};

const editRoundOff = (editCompany) => {
    state.isRoundOffModalOpen = true;
    state.roundOffCompanyId = editCompany.id;
    state.roundOffCompanyName = editCompany.name;
};
</script>