How to use highlight.js in a VueJS app with mixed content

I'm currently using highlight.js to hightlight the code in the HTML content being received from my backend. An example of something I might receive from the backend is:

<h3> Check this example of Javascript </h3>

<pre>
    <code class="language-javascript">let x = 0;
function hello() {}
    </code>
</pre>

As you can see it is a mixed content of HTML and code examples wrapped in pre -> code tags.

I have a component to render WYSIWYG content returned from the backend. In this component, I use highlight.js to highlight the code blocks.

import { defineComponent, h, nextTick, onMounted, ref, watch } from 'vue';
// No need to use a third-party component to highlight code
// since the `@tiptap/extension-code-block-lowlight` library has highlight as a dependency
import highlight from 'highlight.js'
import { QNoSsr } from 'quasar';

export const WYSIWYG = defineComponent({
  name: 'WYSIWYG',
  props: {
    content: { type: String, required: true },
  },
  setup(props) {
    const root = ref<HTMLElement>(null);

    const hightlightCodes = async () => {
      if (process.env.CLIENT) {
        await nextTick();

        root.value?.querySelectorAll('pre code').forEach((el: HTMLElement) => {
          highlight.highlightElement(el as HTMLElement);
        });
      }
    }

    onMounted(hightlightCodes);
    watch(() => props.content, hightlightCodes);

    return function render() {
      return h(QNoSsr, {
        placeholder: 'Loading...',
      }, () => h('div', {
        class: 'WYSIWYG',
        ref: root,
        innerHTML: props.content
      }));
    };
  },
});

Whenever I visit the page by clicking on a link the page works just fine, but when I hard refresh the page I get the following error:

`line` must be greater than 0 (lines start at line 1)

Currently, I'm not sure precisely why this happens, and tried a couple of different approaches

Aproach 1: try to build the whole content and then replace

const computedHtml = computed(() => {
  if (import.meta.env.SSR) return '';

  console.log(props.content);
  
  const { value } = highlight.highlightAuto(props.content);

  console.log(value);

  return '';
})

With this approach, I get the same error as before

`line` must be greater than 0 (lines start at line 1)

I have checked out this error in https://github.com/withastro/astro/issues/3447 and https://github.com/vitejs/vite/issues/11037 but it looks like that this error is more related to Vite than my application - please, correct me if I'm wrong here.

Is there a way for me to highlight the code in the backend that is being returned from the backend in Vue?