Highlight markdown code in textarea (VueJS)

Question

I would like to have 1 textarea with markdown syntax highlighting. I am currently using highlight.js. I wrote a proof of concept, however, this provides me with an additional text area. I would like to have 1 textarea. My current code is as follows:

<template>
  <div>
    <textarea v-model="code" @input="updateHighlightedCode"></textarea>
    <pre v-html="highlightedCode" class="hljs"></pre>
  </div>
</template>

<script>
import hljs from 'highlight.js/lib/core';
import 'highlight.js/styles/monokai-sublime.css';
import 'highlight.js/lib/languages/markdown';

export default {
  data() {
    return {
      code: '',
      highlightedCode: '',
    };
  },
  methods: {
    updateHighlightedCode() {
      this.highlightedCode = this.highlightCode(this.code, 'markdown');
    },
    highlightCode(code, language) {
      return hljs.highlight(language, code).value;
    },
  },
  watch: {
    code(newValue) {
      this.updateHighlightedCode();
    },
  },
};
</script>

<style scoped>
textarea {
  width: 100%;
  height: 200px;
}
pre {
  background-color: #282c34;
  color: #abb2bf;
  padding: 15px;
  border-radius: 5px;
  overflow-x: auto;
}
</style>

This provides me with the following result

I want the highlighting and the typing to be present in the same textarea. Whenever I type in the first textarea, it highlights it and shows it in the second. How can I type and highlight in the same textarea using VueJS + highlight.js?