JSFiddle - React, Tailwind, and code Playground

HTML

<body>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/css/bootstrap.min.css"
        integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" crossorigin="anonymous">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-vue/2.18.1/bootstrap-vue.min.css"
        integrity="sha512-oqSSCKWeQcVs+9Hek1tZlj8hMlLhDNI+NUmm56nBCsO4OLE8dyDpaUA/b2zGi+M9SML0xwGtk22ozH2qyqKipg=="
        crossorigin="anonymous" />
    <link rel="stylesheet"
        href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-vue/2.18.1/bootstrap-vue-icons.min.css"
        integrity="sha512-i0tPmtwhNYyKmqYiccSN9qsEX25FsNNkeWqIbjYyk7QoVkPLfyl7QsABy3oIQx5ofROjV6KLJTzV+asMrT25UA=="
        crossorigin="anonymous" />
    <div id="app">
    
        <b-container>
            <h3>Employee Data</h3>

            <b-pagination v-model="currentPage" :total-rows="rows" :per-page="perPage" 
                            aria-controls="employee-table"></b-pagination>
            <b-table striped hover :items="employees" id="employee-table"
                    :per-page="perPage" :current-page="currentPage" :fields="fields">
                <template v-slot:cell(employeeName)="row" v-if="edit">
                    <b-form-input v-model="row.item.employeeName"/>
                </template>

                <template v-slot:cell(joinDate)="row" v-if="edit">
                    <b-form-input v-model="row.item.joinDate"/>
                </template>

                <template v-slot:cell(selectedDepartment)="row" v-if="edit">
                    <b-form-input v-model="row.item.selectedDepartment"/>
                </template>
                
                <template v-slot:cell(jobDescription)="row" v-if="edit">
                    <b-form-input v-model="row.item.jobDescription"/>
                </template>

                <template v-slot:cell(actions)="row">
                    <b-dropdown variant="primary"...

JavaScript

new Vue({
  el: "#app",
    data() {
        return {
            edit: false,
            perPage: 3,
            currentPage: 1,
            selected: 0,
            employees: [
            	{
                id: 0,
                employeeName: "Jane",
                joinDate: "11-11-1111",
                selectedDepartment: "IT",
                jobDescription: "Nerd"
              },
              {
                id: 1,
                employeeName: "Peter",
                joinDate: "12-12-1212",
                selectedDepartment: "Accounting",
                jobDescription: "Moneier"
              }
            ],
            fields: [
                {
                    key: 'employeeName',
                    label: 'Employee Name',
                    sortable: true
                },
                {
                    key: 'joinDate',
                    label: 'Join Date',
                    sortable: true
                },
                {
                    key: 'selectedDepartment',
                    label: 'Selected Department',
                    sortable: true,
                },
                {
                    key: 'jobDescription',
                    label: 'Job Description',
                    sortable: true,
                },
                {
                    key: 'actions',
                    label: 'Actions',
                    sortable: false,
                }
            ]
        }
    },
    computed: {
        rows() {
            return this.employees.length
        }
    },
    methods: {
        onEdit(index) {
            this.edit = !this.edit
        },
        onDelete(index) {
            this.employees.splice(index, 1);
        }
    }
})