How to import KaTeX globally for my document in vue js?

In the case of static htmls, I could just do the following in the <head> tag:

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/katex@0.10.1/dist/katex.min.css" integrity="sha384-dbVIfZGuN1Yq7/1Ocstc1lUEm+AT+/rCkibIcC/OmWo5f0EA48Vf8CytHzGrSwbQ" crossorigin="anonymous">
              <script defer  src="https://cdn.jsdelivr.net/npm/katex@0.10.1/dist/katex.min.js" integrity="sha384-2BKqo+exmr9su6dir+qCw08N2ZKRucY4PrGQPPWU1A7FtlCGjmEGFqXCv5nyM5Ij" crossorigin="anonymous"></script>
              <script defer src="https://cdn.jsdelivr.net/npm/katex@0.10.1/dist/contrib/auto-render.min.js" integrity="sha384-kWPLUVMOks5AQFrykwIup5lo0m3iMkkHrD0uJ4H5cjeGihAutqP0yW0J6dpFiVkI" crossorigin="anonymous"></script>
              <script>                 
                  document.addEventListener("DOMContentLoaded", function() {
                      renderMathInElement(document.body, {
                          delimiters:[
                              {left: '\\begin{equation}', right: '\\end{equation}', display:true},
                              {left: '$$', right:'$$',display:true},
                              {left:'$', right:'$', display: false},
                              {left:'\\(', right:'\\)', display: false}
                          ]
                      });
                  });

              </script>

which renders my math anywhere in the document as far as I use $ properly. I wanted to do the same thing in VUE app too.

I have added the above code in index.html and it did the job for the initial run. But when I change the router-view and come back to the router where math is there it gives me only the code rather than rendering it.

What I have tried?

One thing, I understood is the router-link does not render the head tag so that auto-render is not getting performed when I switch the routers. So, in the mounted hook, I have added

renderMathInElement(document.body, {
                          delimiters:[
                              {left: '\\begin{equation}', right: '\\end{equation}', display:true},
                              {left: '$$', right:'$$',display:true},
                              {left:'$', right:'$', display: false},
                              {left:'\\(', right:'\\)', display: false}
                          ]
                      });

It does work well and renders the math in that view. But it gives me an error in the terminal

error: 'renderMathInElement' is not defined (no-undef) at src/views/Home.vue:57:2:
  55 |   },
  56 |  mounted(){
> 57 |  renderMathInElement(document.body, {
     |  ^
  58 |                           delimiters:[
  59 |                               {left: '\\begin{equation}', right: '\\end{equation}', display
:true},
  60 |                               {left: '$$', right:'$$',display:true},


1 error found.

How do I handle this?