Mathjax with Vue.js

Question

I am rather stumped as to how I can render Tex equations in my html. I have a vue project with django in the backend as the CMS. I am using Ckeditor as a rich text field which uploads the equation within markdown from an api.

In my vue page I can render all the text with no issues using v-html but my mathematical equations are rendering like this: \(x = {-b \pm \sqrt{b^2-4ac} \over 2a}\)

I have tried many ways to no avail and I can currently get a test equation to render by adding this to index.html

    <script>
     MathJax = {
      tex: {inlineMath: [['$', '$'], ['\\(', '\\)']]}
    };
    </script>
    <script id="MathJax-script" async 
    src="https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-chtml.js">. 
    </script>

and this to my vue page:

   <span class='math-tex'>( \(\frac{2}{7},\frac{2}{18}\) )</span>

However I cant seem to get it to work with inline math and text. Here is my vue div:

            <template v-if="$store.state.user.isAuthenticated">
              <template v-if="activeLesson">
                  <span v-html="activeLesson.long_description"></span>
            </template>
             </template>

Whats strange as well is when I add the test equation <span class='math-tex'>( \(\frac{2}{7},\frac{2}{18}\) )</span> in the template v-f section it doesnt render? What am i doing wrong?

Please halp.