求助：vue中的MathJax 不能完全解析？

index.html中的配置：

<script type="text/javascript" src="http://cdn.bootcss.com/mathjax/2.7.0/MathJax.js?config=TeX-AMS-MML_HTMLorMML"></script> 
<script type="text/x-mathjax-config">
        if(MathJax){
          MathJax.Hub.Config({
            jax: ["input/TeX","output/HTML-CSS", "output/PreviewHTML"],  //输出格式配置：latex 解析为 DOM结构
            tex2jax: {
              inlineMath: [['$','$']],
              displayMath: [ ['$$','$$'], ["\\[","\\]"] ]
            },
            "HTML-CSS": {
              showMathMenu: false,            // 隐藏右键菜单展示
              linebreaks: {
                automatic: true,  //超长公式换行处理（默认是false不换行）
                width: "80%"      //设置换行的点，默认是遇到等号=换行
              } 
            },
          });
        }
        </script>

使用页面：钩子中

mounted(){
        setTimeout(() => {
                window.MathJax && window.MathJax.Hub.Queue(["Typeset", MathJax.Hub, document.getElementsByClassName('mj')],function(){
                    //to do something   公式重新渲染完成后执行这个回调函数
                });
        },0)
    }

结果：

正确显示应该是：

第一次遇到这种情况，特来求助各位前辈们的帮助！！！若有这方面的经验麻烦指导一下本人，感激不尽！！