如何使用 vue.js 实现实时预览？

[metaquant]

刚接触 vue.js 几天，请教大家一个稍显幼稚的问题。

我想实现一个 latex 代码实时预览的功能，做了一个简单的 DEMO 如下： https://metaquant.coding.me/myspa/latex.html

目标是输入 LATEX 代码，通过引用 MATHJAX 脚本进行渲染，就可以实时预览其效果，核心的 HTML 代码与 JS 代码如下：

<div class="wrap">
  <h1>Latex Live Preview</h1>
  <div id="main">
  <form class="form">
<input type="text" class="form-control" v-model="first">
<span class="help-block">please input your latex code</span>
</form>
<h1 v-text='result'></h1>
</div>
</div>


    ```javascript
    <script type="text/javascript">
    var vm = new Vue({
      el: '#main',
      data: {
        first: '\\sqrt {{a^2} + {b^2}}'
      },
      computed: {
        result: function () {
            res = '$$' + this.first + '$$';
            return res;
        }
      }
    })
    </script>

现在能够基本实现预览，但是如果我对输入框进行修改，却达不到实时预览的效果：
![]( https://ws1.sinaimg.cn/large/0066jkbcgw1faw0ubzhkqj30tq0gcwh5.jpg)

请问这是需要不断重新加载脚本？还是因为什么了？