函数运行但模板不填充

Question

我正在通过在网站上制作一些小部件来学习vue。我做了一个JSFiddle，可以掷出两个四边形的骰子并打印结果。对我来说似乎很简单：

<div id="app">
  <p class="helpertxt">{{ introtxt }}</p>
  <button id="roll-btn" v-on:click="rolladie">ROLL</button>
  <textarea id="die-res" cols="50" rows="3" readonly></textarea>
</div>

vue实例列出了一个简单的味精。

new Vue({
  el: "#app",
  data: {
    introtxt: 'Version 1.0 rolls 2d4. Press the button!'
  },
  methods: {
    rolladie: function(){
        var res1 = Math.floor((Math.random() * 4) + 1);
        var res2 = Math.floor((Math.random() * 4) + 1);
        var tres = 'You rolled ' + res1 + ', ' + res2;
        document.getElementById("die-res").innerHTML = tres;
        }
    }
})

我不明白的是为什么消息在JSFiddle上填充而在my website上不填充。为什么该功能可以正常工作，但是消息没有插入模板上？