Add a column with header title in handsontable js vue3

Question

I'm trying to dynamically add a column in HandsonTable on button click.

I can add a column, but I cannot seem to change the column header.

Here is a code snippet

const settings = {
    ...
    manualColumnResize: true,
    colHeaders: ['Name', 'Percent'],

}

function click() {

    const table = studentsTableRef.value.hotInstance

    table.suspendRender();
    table.alter('insert_col_end',3);
    table.updateSettings({
        colHeaders: ['Name', 'Percent', "Test"],
    })

    table.resumeRender();
}


...

data = [ // data is a ref
    [null, null],
    [null, null]
]

<HotTable ref="tableRef" :data="data" :settings="settings"></HotTable>

It successfully adds a new column, but just defaults to the default "C". The new column header is not Test.

I'm clearly missing something, but I cannot find anything in the docs to set a header data.