Datatable - code helper

xxxxxxxxxx
 
<template>
  <MDBDatatable :dataset="dataset5" selectable multi @selected-rows="selected" @render="render" />
</template>

xxxxxxxxxx
 
<style>
#app {
  font-family: Roboto, Helvetica, Arial, sans-serif;
}
</style>

xxxxxxxxxx
 
<script>
  import { MDBDatatable } from "mdb-vue-ui-kit";
  import { ref, onMounted } from "vue"
  export default {
    components: {
      MDBDatatable
    },
    
    setup() {
      const dataset5 = ref({
           columns: [
            { label: "Name", field: "name" },
            { label: "Position", field: "position", sort: false },
            { label: "Office", field: "office", sort: false },
            { label: "Age", field: "age", sort: false },
            { label: "Start date", field: "date" },
            { label: "Salary", field: "salary", sort: false }
          ],
           rows: [
            {
              name: "Tiger Nixon",
              position: "System Architect",
              office: "Edinburgh",
              age: 61,
              date: "2011/04/25",
              salary: "$320,800",
            },
            {
              name: "Garrett Winters",
              position: "Accountant",
              office: "Tokyo",
              age: 63,
              date: "2011/07/25",
              salary: "$170,750"
            },
            {
              name: "Ashton Cox",
              position: "Junior Technical Author",
              office: "San Francisco",
              age: 66,
              date: "2009/01/12",
              salary: "$86,000"
            },
            {
              name: "Cedric Kelly",
              position: "Senior Javascript Developer",
              office: "Edinburgh",
              age: 22,
              date: "2012/03/29",
              salary: "$433,060"
            },
            {
              name: "Airi Satou",
              position: "Accountant",
              office: "Tokyo",
              age: 33,
              date: "2008/11/28",
              salary: "$162,700"
            },
            {
              name: "Brielle Williamson",
              position: "Integration Specialist",
              office: "New York",
              age: 61,
              date: "2012/12/02",
              salary: "$372,000"
            },
            {
              name: "Herrod Chandler",
              position: "Sales Assistant",
              office: "San Francisco",
              age: 59,
              date: "2012/08/06",
              salary: "$137,500"
            },
            {
              name: "Rhona Davidson",
              position: "Integration Specialist",
              office: "Tokyo",
              age: 55,
              date: "2010/10/14",
              salary: "$327,900"
            },
            {
              name: "Colleen Hurst",
              position: "Javascript Developer",
              office: "San Francisco",
              age: 39,
              date: "2009/09/15",
              salary: "$205,500"
            }
          ]
        })
      
      const checkboxesUpdated = ref(false);
      const render = () => {
        const checkboxes = document.querySelectorAll(".form-check-input");
        if (!checkboxesUpdated.value) {
          checkboxesUpdated.value = true;
          checkboxes.forEach((item,id)=>{
            id % 2 && item.dispatchEvent(new Event("change"))
          })
//           checkboxes[1].dispatchEvent(new Event("change"));
        }
      };
      
      const selected = (e) => {
        console.log(e)
      }
      
      
      return {
        dataset5, render, selected
      };
    }
  };
</script>

Console errors: 0