markdown-it-highlightjs not highlighting code blocks in nuxt3

Question

I am using markdown-it on my website to render markdown as html. I also want to enable code block highlighting both inline and

fenced code blocks like this one

---

Now, I am using nuxt3 and this is vue component to test things out.

<template>
  <div v-html="generated_html"></div>
</template>

<script setup lang="ts">
// @ts-ignore
import MarkdownIt from "markdown-it";
import mditHljs from "markdown-it-highlightjs";
// @ts-ignore
import mditKatex from "markdown-it-katex";

const mdit = new MarkdownIt();

mdit
  .use(mditHljs, {
    inline: true,
    auto: true,
    code: true,
  })
  .use(mditKatex);

const generated_html = ref(
  mdit.render(`
This \`word\` is an inline code block.\n
Below is a fenced code block:
\`\`\` cpp
#include <iostream>
using namespace std;

int main() {
  cout << "Hello World!";
  return 0;
}
\`\`\`
`)
);

</script>

<style scoped>
</style>

Upon navigating to the component, I get this output

---

From the browser devtools, I can see that markdown-it-highlightjs has added a class hljs to <code> tags which indicates that it is being loaded and supposedly doing it's job but still not highlighting the code blocks at all. The monospaced font being used is already there without using any markdown-it plugins. I can also write math expressions using iktakahiro/markdown-it-katex which you can see me using in the code.