How do I insert object created with document.creat

Question

I like to know how I can insert a Element that has already been created with the document.createElement method into the template. I am not sure how to proceed here because eventually I would also like to bind the contents of that particular textBox. Here is the (non working) code that I have up till now to illustrate what I like to do:

<template>
  <div>
    <p id="status">{{ statusMessage }}</p>
    <div id="output" v-html="textBox"></div>
  </div>
</template>

<script>
export default {
  name: 'Result',
  data() {
    return {
      statusMessage: "Status",
      textBox: Object,
    }
  },
  mounted() {
    this.textBox = this.$someModule.createTextBox()
    console.log('textBox should become: '+this.textBox)
       // Shows: textbox should become: [object HTMLTextAreaElement]
  },
  ...
}

Answer 1

First of all, v-html is a directive that allow you to use raw html text.

ref: https://vuejs.org/v2/guide/syntax.html#Raw-HTML

Second of all, you can you a ref directive to create a link to you element (ref="someName"):

<div id="output" ref="textBox"></div>

Then:

const el = this.$refs.textBox;
el.appendChild('entity which you want to append');