Filter option cannot be loaded into the payload in vuejs datatable

Question

I'm trying to implement a filter for my employees vue component.

I'm displaying data in a datatable.

I have multiple filters and one of the filter is called, employee types.

<!--Employee Type  filter-->
                        <div class="w-6/12 pl-4 h-auto">
                            <cs-multiple-select
                                v-model="selectedEmployeeTypes"
                                :options="employeeType"
                                key-id="id"
                                label="name"
                                name="employee-type"
                                placeholder="Employee Type"
                            >
                            </cs-multiple-select>
                        </div>

following is my code inside the <script></script>

<script>
// Helper
import Helper from '@/Support/Helper.js';
import AddEmployeeModal
    from "@/components/dashboard/corporate/employee/project-employees/add-employee-modal";
import Datatable from "@/components/reusable/datatable/Datatable";
import CsConfirmationModal from "@/components/dashboard/reusable-modals/cs-confirmation-modal";
import HasToastrMessage from '@/Mixins/HasToastrMessage.js';
import Pagination from "@/Mixins/Pagination";
import AssignDepartment
    from "@/components/dashboard/corporate/project/employers-projects-detail-departments/assign-department";
import OpenOverlay from "@/components/overlay/open-overlay";
import InviteEmployees from "@/components/dashboard/corporate/employee/project-employees/invite-employees";
import CsButton from "@/components/reusable/cs-button";
import CsMultipleSelect from "@/components/reusable/dropdowns/cs-multiple-select";
import DatatableActionbarItem from "@/components/reusable/datatable/DatatableActionbarItem";

export default {
    components: {
        DatatableActionbarItem,
        CsMultipleSelect,
        CsButton,
        InviteEmployees,
        OpenOverlay,
        AssignDepartment,
        CsConfirmationModal,
        Datatable,
        AddEmployeeModal
    },

    props: ['companyUuid', 'projectId'],

    mixins: [HasToastrMessage, Pagination],

    data() {
        return {
            projectEmployees: [],
            originalEmployees: [],
            page: 1,
            perPage: 15,
            selectedDepartments: [],
            selectedEmployeeTypes:[],
            selectedCountries: [],
            selectedJobTitles: [],
            status: [],
            matrixStatus: [],
            searchText: null,
            jobTitles: [],
            departments: [],
            countries: [],
            isLoading: false,
            selectedUserId: null,
            showMatrixModal: false,
            selectedJobTitleId: null,
            selectedDepartmentId: null,
            selectedUserToShowMatrix: null,
        }
    },

    watch: {
        status() {
            this.$refs.datatable.refreshPagination()
        },

        matrixStatus() {
            this.$refs.datatable.refreshPagination()
        },

        selectedJobTitles() {
            this.$refs.datatable.refreshPagination()
        },

        selectedDepartments() {
            this.$refs.datatable.refreshPagination()
        },

        selectedCountries() {
            this.$refs.datatable.refreshPagination()
        },
        
        selectedEmployeeTypes(){
            this.$refs.datatable.refreshPagination()
        },
    },

    async mounted() {
        await this.loadProjectEmployees()
        this.originalEmployees = this.projectEmployees

        eventsHub.$on('filtering:done', () => {
            eventsHub.$emit('pagination:reset');
        });

        this.loadProjectSpecificJobTitles()
        this.loadDepartments();
        this.loadCountries();

        await this.loadProject();

        eventsHub.$on('overlay:isMounted:statusSummaryComponent', () => {
            eventsHub.$emit('overlay:open:statusSummaryComponent');
        });

        eventsHub.$on('overlay:close:statusSummaryComponent', () => {
            this.showMatrixModal = false
        });

    },

    computed: {
        HeaderArray() {
            return [
                {text: 'Employee', value: 'employee_detail'},
                {text: 'Job title', value: 'job_title'},
                {text: 'Department', value: 'department_name'},
                {text: 'Start date', value: 'start_date', filters: ['formatDate']},
                {text: 'End date', value: 'end_date', filters: ['formatDate']},
                {text: 'Nationality', value: 'country_flag', classList: 'text-center'},
                {text: 'Qualification status', value: 'status'},
                {text: 'Matrix status', value: 'matrix_status'},
            ];
        },

        noData() {
            return !(Helper.isset(this.originalEmployees) && this.originalEmployees.length > 0)
        },

        certificateStatusList() {
            return [
                {status: 'expire_soon', name: 'Expire Soon'},
                {status: 'expired', name: 'Expired'},
                {status: 'missing', name: 'Missing'},
            ]
        },

        matrixStatusList() {
            return [
                {status: 'complaint', name: 'compliant'},
                {status: 'non_complaint', name: 'non-compliant'},
            ]
        },

        employeeType() {
            return [
                {name: 'Employee', id: '0'},
                {name: 'Subcontractor', id: '1'},
            ]
        },

        isSelectedCountIsOne() {
            return this.$refs.datatable.selected.length === 1
        },

        userSuggestionApiURL() {
            return `json/companies/${this.companyUuid}/projects/${this.projectId}/suggested-users`;
        },

        project() {
            return this.$store.getters.getProject.project;
        },

        inviteModalTitle() {
            const title = this.project ? this.project.title : '';
            return `Invite employee(s) to ${title}`;
        },
        employeeCount() {
            return Helper.isset(this.projectEmployees.total) ? this.projectEmployees.total : 0;
        }
    },

    methods: {
        async loadProjectEmployees() {
            this.isLoading = true
            let payload = {};

            payload.companyUuid = this.companyUuid;
            payload.projectId = this.projectId;
            payload.certificate_status = this.status;
            payload.matrix_status = this.matrixStatus;
            payload.search_text = this.searchText;
            payload.page = this.page;
            payload.per_page = this.perPage;
            payload.job_titles = this.selectedJobTitles;
            payload.departments = this.selectedDepartments;
            payload.employee_type= this.selectedEmployeeTypes;
            payload.countries = this.selectedCountries;

            await this.$store.dispatch('loadProjectEmployees', payload)
                .then((data) => {
                    this.projectEmployees = data
                    this.isLoading = false
                }).catch(() => this.isLoading = false)
        },

        HandleChange(currentPage, perPage, searchTerm) {
            this.page = currentPage
            this.perPage = perPage
            this.searchText = searchTerm
            this.loadProjectEmployees()
        },

        handleRowClick(event, item) {
            let element = event.target;

            // Handle all exceptions here

            if (element.classList.contains('selectable--checkbox')) {
                return false;
            } // do nothing, the selectable handles the functionality

            if (element.classList.contains('status--summary--component')) {
                return false;
            } // do nothing, the selectable handles the functionality

            // The default action should be handled below.
            window.location.href = `/${Helper.getLocale()}/dashboard/companies/${this.companyUuid}/users/${item.unique_id}/certificates`;
        },

        isAllActive(item) {
            return !(
                item.expire_soon || item.expired
            )
        },

        loadProjectSpecificJobTitles() {
            let payload = {}
            payload.companyUuid = this.companyUuid
            payload.project_id = this.projectId

            this.$store.dispatch('loadProjectSpecificJobTitles', payload)
                .then((data) => {
                    this.jobTitles = data.projectSpecificJobTitles
                });
        },

        loadDepartments() {
            let payload = {}
            payload.companyUuid = this.companyUuid
            payload.projectId = this.projectId

            this.$store.dispatch('loadProjectDepartments', payload)
                .then((data) => {
                    this.departments = data
                }).catch(() => {
            });
        },

        loadCountries() {
            let payload = {}
            payload.companyUuid = this.companyUuid
            payload.projectId = this.projectId

            this.$store.dispatch('loadProjectUserCountries', payload)
                .then((data) => {
                    this.countries = data
                }).catch(() => {
            });
        },

        removeProjectEmployees() {
            axios
                .post(`/${Helper.getLocale()}/dashboard/json/companies/${this.companyUuid}/projects/${this.projectId}/users`, {
                    _method: 'delete', users: this.$refs.datatable.selected
                })
                .then(({data}) => {
                    if (data.success) {
                        this.showToastrSuccessMessage(data.success)
                    }
                    this.loadProjectEmployees()
                }).catch(() => {
                this.showToastrErrorMessage("User remove failed.")
            })
        },

        handleEmployeeAssignToDepartment(data) {
            this.loadProjectEmployees()
            this.showToastrSuccessMessage(data.success)
        },
        addEmployeeToProject(userIds) {
            return axios
                .post(`/${Helper.getLocale()}/dashboard/companies/${this.companyUuid}/projects/${this.projectId}/users`, {
                    user_ids: userIds,
                }).then(({data}) => {
                        if (Helper.isset(data.success)) {
                            this.showToastrSuccessMessage(data.success.message);
                            this.loadProjectEmployees()
                            this.$refs.addEmployeeModal.suggestedUsers = []
                            this.$refs.addEmployeeModal.selectedEmployees = []
                            this.$refs.addEmployeeModal.loadSuggestedUsers()
                        }
                    }
                ).catch(() => {
                    this.showToastrErrorMessage("Project employee is failed to add")
                })
        },
        loadProject() {
            let payload = {};

            payload.companyUuid = this.companyUuid;
            payload.projectId = this.projectId;

            this.$store.dispatch('loadProject', payload);
        },
        /**
         *
         * @param inviteEmails
         * @param loader
         * @param cb
         */
        handleInvitedEmployees(inviteEmails, loader, cb) {
            //Processing
            loader.toggle();

            const data = {
                company_uuid: this.companyUuid,
                project_id: this.projectId,
                employees_emails: inviteEmails,
            }
            this.$store.dispatch('inviteEmployeesToProject', data).then((data) => {
                cb(data);
            }).catch((error) => {
                this.errorMessages = collect([]);
                this.$nextTick(() => {
                    let responseErrors = collect(error.response.data.errors);
                    this.errorMessages = responseErrors.flatten();
                });
            }).finally(() => loader.toggle());
        },

        showAddEmployeeModal() {
            eventsHub.$emit('overlay:open:addEmployeeModal');
        },

        employeeDetailRoute(employee) {
            return `/${Helper.getLocale()}/dashboard/companies/${this.companyUuid}/employees/${employee.id}/certificates`;
        },

        showAssignEmployeeToDepartmentModal(item) {
            this.selectedUserId = [item.id]
            eventsHub.$emit('overlay:open:assignEmployeeToDepartment');
        },

        showMatrixStatusModal(item) {
            this.showMatrixModal = true
            this.selectedUserToShowMatrix = item.id
            this.selectedJobTitleId = item.job_title_id
            this.selectedDepartmentId = item.department_id
            eventsHub.$emit('overlay:open:statusSummaryComponent');
        }
    }
}
</script>

Now the issue is when I try to filter by employee type, it's selected value (0 or 1) cannot be loaded into the payload.

This is my sample payload out put if I filtered by employee type,

page: 1
per_page: 15
search_text:

This is my payload if I filtered by filter like qualification status,

page: 1
per_page: 15
status[]: expired
search_text:  

This is my payload output if I filter by both qualification status and employee type,

page: 1
per_page: 15
status[]: expired
search_text: 

Expected result has to be,

page: 1
per_page: 15
status[]: expired
employee_type[]:1
search_text:

employee_type is not getting passed to the payload...

Where should I fix to send employee_type value to payload?