How do I get Highlight.js to show HTML in a Vue component?

Question

I'm using highlight JS with a Vue project and I want to show a div on the edges of my code. I've tried

<pre v-highlightjs="viewerHTML"><div>Something here</div><code class="html">

and

<pre v-highlightjs="viewerHTML">'<div>Something here</div>'<code class="html">

Both are hiding the div portion. How do I show the full code?

Answer 1

I found that if I created a string in in my data section of my Vue component it renders correctly

<pre v-highlightjs="viewerHTML"><code class="html">

data () {
  return {
    viewerHTML: '<div>Something here</div>'
  }