Динамическое добавление строк и столбцов в таблицу с помощью vue js

Question

Я пытаюсь реализовать функцию, при которой пользователь сможет добавлять новые столбцы и строки в таблицу, используя vue js.Я могу вставить тег в таблицу, однако метод, который я использую для добавления, я не думаю, что это правильный путь, тем более что тд добавляются к объекту, но только к самому представлению.

Я извлекаю содержимое html-таблицы по умолчанию из вспомогательного файла laravel

 (object)array(
        'label'         => 'Table', 
        'field_name'    => '', 
        'type'          => 'table',
        'properties'    => (object)array(
            'headers' => [
                'Header 1',
            ],
            'rows' => [
                (object) array(
                    'value' => 'Row 1 content',
                ),
            ],
        )
    )

Html (vue js)

<code>...
<div v-if="field.type == 'table'">
   <pre>{{field.properties.headers}}

{{field.properties.rows}}

{{header}} {{row.value}}

Добавить столбец Добавить строку

...

Скрипт (vue js)

...
methods: {
    addTableColumn(properties, index) {
        properties.headers.push('Column Heading');
        $(`#table${index} #default-row`).append(`<td>Row Content</td>`);
    },
    removeTableColumn(properties, index) {
        properties.headers.splice(index, 1);
        properties.rows.splice(index, 1);
    },
    addTableRow(properties, index) {
        // let columnCount = properties.headers.length;

        // for(let i = 0; i < columnCount; i++) {
        //     properties.rows.push({'value': 'Row content'});
        // }
        // console.log(columnCount);
        // console.log(index);
        // rows.push({ 'value': 'Row column' });

        $(`#table${index}`).append(`<tr>${$('#default-row').html()}</tr>`);
    }
},...

Вид как виднона рисунке ниже я нажал кнопку «добавить столбец», и только сам заголовок помещается в массив, а не новое содержимое td (содержимое строки).