（编辑包括解决方法，但原来的问题仍然存在）
我有一个 HTML 页面，我正在尝试使用 Vue.js（因为其漂亮且简单的组件等等）和 MathJax（显然是为了布局数学方程）创建一个 HTML 页面，但它们不能很好地协同工作。我发现一些关于这个问题的讨论 w/r/t Angular（另一种类似于 Vue 的 Web 技术，以我有限的理解），但没有关于 Vue 和 MathJax 的讨论。
我意识到问题与 Vue 直接操作 HTML DOM 有关，而 MathJax 没有意识到/处理它。MathJax 中有一些方法声称可以帮助解决此问题，但要么它们不起作用，要么我没有正确使用它们。
这是我尝试的一个最小的例子：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<script src='https://cdn.mathjax.org/mathjax/latest/MathJax.js?config=TeX-AMS-MML_HTMLorMML'></script>
<title>Vue and Mathjax Failing Together</title>
</head>
<body>
<h2>Vue and Mathjax Failing Together</h2>
<div id="app">
<p>The MathJax string renders OK in a Vue data binding (shown using "triple mustache" notation because it's got HTML in it)</p>
{{{ mathjax_paragraph }}}
<hr>
<button v-on:click="createDynamicMarkup">Click to show {{ …