Setting variable in table with docx doesn't work - vue.js

Question

I'm trying to set a variable in a TableCell inside a TableRow inside a Table which is automatically generated using the docx library (https://github.com/dolanmiu/docx).
Underneath is the code I'm using. First I'm trying to make a table and in the final part I'm using the table to fill a Word Document. In the same document I'm just using new Paragraph to extract the same data from the data property. When using the paragraph my document states a '1', like it should (I'm trying to print variable numbers in my table). In the table nothing shows up, just an empty cell. However when I edit the style in the cell the size of the cell does change according to the new style? Can anyone tell me what I'm doing wrong here and how I should change it? Thanks in advance!
export default {
data() {
return {
budget: {
planning: 1,
}
}
}
}
const table = new Table({
rows: [
new TableRow({
children: [
new TableCell({
children: [new Paragraph(this.budget.planning)],
}),
new TableCell({
children: [new Paragraph(
text: this.budget.planning,
heading: heeboNormal //style I defined in my document earlier on
)],
}),
],
}),
],
})
const doc = new Document({
sections: [{
children: [
table,
new Paragraph({this.budget.planning})
],
}],
})

Answer 1

I've finally found a solution to the problem. It's probably not the best solution but if someone comes across the same problem, here is a solution. I've only entered the Table code for simplicity.
new Table({
rows: [
new TableRow({
children: [
new TableCell({
children: [
new Paragraph({
children: [
new TextRun({ text: this.budget.planning }),
// Using a TextRun inside the table is the solution
// also make sure to define it as 'text' and it should work!
],
}),
],
}),
],
}),
]
});
Happy Coding!