Javascript 为什么我的vue.js按钮不创建新的文本区域？

我正在使用vue.js开发我的第一个Web应用程序，我希望有一个按钮，在单击时可以创建一个新的文本区域。当我在JSFIDLE上检查它时，它似乎工作得很好，但是当我在VisualStudio中加载并运行它时，我没有得到任何结果，文本区域和按钮也不显示

<!-- HTML -->
<div id="column1" style="float:left; margin:0; width:25%;">
            <h4>Column Header</h4>
            <div id="tile">
                <input type="button" value="+" @click="addInput">
                <div class="inputArea" v-for="input in inputs" :key="input.id">
                    <textarea placeholder="Enter text... " :id="input.id" v-model="input.value"></textarea>
                </div>
            </div>
        </div>


/* Vue.js on my main.js */
var tile = new Vue({
    el: '#tile',
    data: {
        counter: 0,
        inputs: [{
            id: 'text0',
            value: '',
        }],
    },
    methods: {
        addInput() {
            this.inputs.push({
                id: 'text${++this.counter}',
                value: '',
            });
        }
    }
});

行标题
/*my main.js上的Vue.js*/
var tile=新的Vue({
el:'瓷砖'，
数据：{
柜台:0,，
投入：[{
id:'text0'，
值：“”，
}],
},
方法：{
addInput（）{
这是推({
id:'text${++this.counter}'，
值：“”，
});
}
}
});

---

我希望每次按下按钮时都会创建一个文本框。文本框应显示在上一个文本框的下方。但是，我没有看到按钮或任何文本框。谢谢你花时间考虑这个问题！

数据

属性必须是函数（返回对象）。否则，它在第一次渲染时仅初始化一次

将其更改为此，它应该可以工作：

data() {
  return {
    counter: 0,
    inputs: [{
      id: 'text0',
      value: '',
    }],
  }
}

此外，在使用模板文字时，必须使用回号（`），因此方法应为：

addInput() {
  this.inputs.push({
    id: `text${++this.counter}`,
    value: '',
  });
}

---

您在控制台中看到任何错误吗？您安装了吗，导入了vue？控制台中没有我可以看到的任何错误，并且我确实安装了导入vue。当我从VS 2017运行它时，它会在IE版本11.1146.16299.0中打开（如果有帮助的话），我已经做了这两个更改，虽然它们正在工作（用我的代码替换HTML和JS），但在VS用完时，我仍然看不到任何更改。非常感谢您对我的问题的快速回答。要更新，现在，当我将cdn.jsdeliver.net/npm/vue/dist/vue.js“>添加到中，并将javascript放在index.html的正文底部时，它在我的应用程序中起作用。但是如果它在main.js页面上，它似乎不起作用。我还包括了src=“main.js”，但这没有帮助。