Vue.js render textarea HTML in iframe

index.html

<div id="app">
  <div class="flex flex-wrap h-screen">
    <editor target="preview" class="w-full lg:w-2/5 p-4 font-mono bg-grey-lightest outline-none resize-none"></editor>
    <iframe id="preview" class="w-full lg:w-3/5 bg-graph-paper"></iframe>
  </div>
</div>
</body>

index.js

Vue.component("editor", {
  props: {
    placeholder: {
      type: String,
      required: false, 
      default: 'Paste in some HTML...'
    },
    target: {
      type: String,
      required: true
    }
  },
  data: function() {
    return {};
  },
  mounted: function() {
  },
  methods: {
    setSrcdoc: function() {
      let iframe = document.getElementById(this.target);
      iframe.srcdoc = this.$el.value;
    }
  },
  render: function(createElement) {
    return createElement(
      'textarea',
      {
        domProps: {
          placeholder: this.placeholder
        },
        on: {
          input: this.setSrcdoc
        }
      }
    );
  }
});

new Vue({
  name: "vue-textarea-iframe",
  el: "#app"
});