VueJS Render VNode

tl; dr:

Учитывая объект VueJS VNode, как мне получить элемент HTML, который был бы сгенерирован, если бы он был отрисован?

например.:

> temp1
VNode {tag: "h1", data: undefined, children: Array(1), text: undefined, elm: undefined, …}
> temp1.children[0]
VNode {tag: undefined, data: undefined, children: undefined, text: "Test", elm: undefined, …}
> doSomething(temp1)
<h1>Test</h1>

Цель

Я пытаюсь создать небольшую оболочку VueJS вокруг библиотеки DataTables.net.

Чтобы имитировать поведение HTML-таблиц в моей разметке, мне нужно что-то вроде следующего:

<datatable>
    <thead>
        <tr>
            <th>Name</th>
            <th>Age</th>
            <th>Salary</th>
        </tr>
    </thead>
    <tbody>
        <datatable-row v-for = "person in people">
            <td>{{ person.name }}</td>
            <td>{{ person.age }}</td>
            <td>{{ person.salary }}</td>
        </datatable-row>
    </tbody>
</datatable>

Что я сделал до сих пор

Я начал реализовывать это следующим образом:

DataTable.vue

<template>
    <table ref = "table" class = "display table table-striped" cellspacing = "0" width = "100%">
        <slot></slot>
    </table>
</template>

<script>
/* global $ */
export default {
    data: () => ({
        instance: null
    }),
    mounted() {
        this.instance = $(this.$refs.table).dataTable();
        this.$el.addEventListener("dt.row_added", function(e) {
            this.addRow(e.detail);
        });
    },
    methods: {
        addRow(row) {
            // TODO <-----
            console.info(row);
        }
    }
};
</script>

DataTableRow.vue

<script>
/* global CustomEvent */
export default {
    mounted() {
        this.$nextTick(() => {
            this.$el.dispatchEvent(new CustomEvent("dt.row_added", {
                bubbles: true,
                detail: this.$slots.default.filter(col => col.tag === "td")
            }));
        });
    },
    render() { return ""; }
};

Что это в настоящее время делает:

• Когда страница загружается, DataTable инициализируется. Таким образом, заголовки столбцов правильно отформатированы, и я вижу «Отображение от 0 до 0 из 0 записей» в левом нижнем углу.
• CustomEvent может всплывать мимо <tbody> и быть пойманным элементом DataTableуспешно (обход ограничения VueJS, что вы не можете прослушивать события в слотах)

Что это делает нет:

• Собственно добавить строку

Мое событие дает мне массив объектов VNode. В моем ряду по одному VNode на столбец. В DataTables API есть функция addRow, которую можно вызвать так:

this.instance.row.add(["col1", "col2", "col3"]);

В моем случае я хочу, чтобы результирующий элемент от рендеринга VNode был элементами в этом массиве.

var elems = [];
for (var i = 0; i < row.length; i++)
    elems[i] = compile(row[i]);
this.instance.row.add(elems);

К сожалению, этот метод compile ускользает от меня. Я пробовал бегло просмотреть документацию VueJS, и я попробовал погуглить, но без кубиков. Я попытался вручную передать функцию createElement (параметр, переданный методу render), но это вызвало ошибку. Как я могу попросить VueJS отобразить VNode, не вставляя результат в DOM?