DataTable not updating after adding new row in JavaScript application

I’m working on a JavaScript web application that uses DataTables to display a list of instructors. I’m having an issue where the DataTable doesn’t update immediately after adding a new instructor to the underlying data array.

The Problem

When I add a new instructor through a form submission, the underlying data array updates correctly, but the DataTable doesn’t reflect these changes until I manually refresh the page.

Code

I’ve reproduced this issue in both Vue.js and vanilla JavaScript. Here are CodePen links demonstrating the problem:

• Vue version: https://codepen.io/badershs/pen/xxoBXQx
• Vanilla JavaScript version: https://codepen.io/badershs/pen/JjQzreo

What I’ve Tried

1. I’ve attempted to destroy and reinitialize the DataTable after adding new data:

updateDataTable() {
    if (this.dataTable) {
        this.dataTable.destroy();
    }
    this.$nextTick(() => {
        this.dataTable = $('#instructor-table').DataTable();
    });
}

2. I’ve also tried using setTimeout to delay the reinitialization:

updateDataTable() {
    if (this.dataTable) {
        this.dataTable.destroy();
    }
    setTimeout(() => {
        this.dataTable = $('#instructor-table').DataTable();
    }, 0);
}

3. I’ve made sure that the underlying data array (instructors) is updated correctly before calling updateDataTable().

Expected Behavior

I expect the DataTable to reflect the new data immediately after adding a new instructor, without requiring a page refresh.

Important Notes

1. My main goal is to fix this issue in the Vue implementation but I noticed it happened on pure javascript .
2. I don’t want solutions that pass the instructors array directly to DataTables. The data should remain managed by Vue v-for.

Question

How can I update the DataTable in my application to reflect new data without requiring a page refresh? Is there a more efficient way to add new rows to a DataTable dynamically while keeping the data management within Vue?

Any help or guidance would be greatly appreciated. Thank you!