title: Updating DOM with MathJax and Vue.js
body: <p>(Edited to include a work-around, but the original problem still stands)</p>
  
  <p>I've got an HTML page I'm trying to create using Vue.js (for its nice and easy components and whatnot) and MathJax (to layout math equations, obviously) but they are not playing nice together. I have found some talk about this issue w/r/t Angular (another web technology similar to Vue, in my limited understanding) but nothing about Vue and MathJax.</p>
  
  <p>I realize the problem has to do with Vue manipulating the HTML DOM directly, and MathJax not realizing it/dealing with it. There are some methods in MathJax that purport to help with this, but either they don't work or I'm not using them correctly.</p>
  
  <p>Herewith is my attempt at a minimal example:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="false" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
  &lt;head&gt;
   &lt;meta charset="UTF-8"&gt;
   &lt;script src='https://cdn.mathjax.org/mathjax/latest/MathJax.js?config=TeX-AMS-MML_HTMLorMML'&gt;&lt;/script&gt;
   &lt;title&gt;Vue and Mathjax Failing Together&lt;/title&gt;
  &lt;/head&gt;
  
  &lt;body&gt;
  &lt;h2&gt;Vue and Mathjax Failing Together&lt;/h2&gt;
  
  &lt;div id="app"&gt;
  
  &lt;p&gt;The MathJax string renders OK in a Vue data binding (shown using "triple mustache" notation because it's got HTML in it)&lt;/p&gt;
  {{{ mathjax_paragraph }}}
  &lt;hr&gt;
  
  &lt;button v-on:click="createDynamicMarkup"&gt;Click to show {{ show_math ? "HTML":"MathJax" }} markup&lt;/button&gt;
  &lt;p&gt;Here is the dynamic element:&lt;/p&gt;
  &lt;div id="dynamic_markup_div"&gt;
  {{{ dynamic_markup }}}
  &lt;/div&gt;
  
  &lt;br&gt;
  &lt;br&gt;
  &lt;hr&gt;
  &lt;pre&gt;
  APP DATA = {{ $data | json }}
  &lt;/pre&gt;
  
  &lt;/div&gt;
  
  &lt;script src='vue.js'&gt;&lt;/script&gt;
  &lt;script&gt;
   new Vue({
    el: '#app',
    data: {
     html_paragraph: "&lt;p&gt;&lt;i&gt;This is plain HTML&lt;/i&gt;&lt;/p&gt;",
     mathjax_paragraph: "&lt;p&gt;\\begin{eqnarray*} \\frac{20}{3}=6.66= 6\\mbox{ hours and } 40 \\mbox{ minutes}. \\end{eqnarray*} &lt;/p&gt;",
     dynamic_markup: "&lt;p&gt;&lt;i&gt;plain HTML&lt;/i&gt;&lt;/p&gt;",
     show_math: false,
  
     math_thing: 0,
     },
    methods: {
     createDynamicMarkup: function(event) {
      this.show_math = !this.show_math;
      if (this.show_math) {
       this.dynamic_markup = this.mathjax_paragraph;
  
      // After a short delay, tell MathJax to update. (So short it's zero!)
      // as per https://groups.google.com/forum/#!topic/mathjax-users/EEg35NK2wXU
       MathJax.Hub.Queue(
         ["Delay", MathJax.Callback, 0],
         ["Typeset", MathJax.Hub, "dynamic_markup_div"]
       );
  
       }
      else {
       this.dynamic_markup = this.html_paragraph;
       }
      },
     },
    });
  &lt;/script&gt;
  
  &lt;/body&gt;
  &lt;/html&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>When you first load the page, the plain-old HTML is shown; click the button, and the MathJax is supposed to be shown. Except it's not rendered as math (except <em>sometimes</em> - see below).</p>
  
  <p>EDIT: I found a work-around, adding a delay (of zero milliseconds!) and then a forced update, which works - but should it be necessary?</p>
  
  <p><a href="https://i.stack.imgur.com/OOSQb.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/OOSQb.png" alt="enter image description here"></a></p>
  
  <p>Anyway, any suggestions would be most appreciated!</p>
  
  <p>/rob</p>