新手使用vue有个问题不是很明白

代码如下
$.ajax({
type: "get",
url: "http://127.0.0.1:9999/queryclassnametype",
async: true,
data: {
"type": "错误笔记"
},
success: function(res) {
console.log(res)
new Vue({
el: "#classname",
data: {
classname: res.data,
nowIndex: 0
},
methods: {
classclick: function(index, e) {
this.nowIndex = index;
$.ajax({
type: "get",
url: "http://127.0.0.1:9999/typetable",
async: true,
data: {
"tablename": "errornote",
"classname": e
},
success: function(res) {
console.log(res.data)
new Vue({
el: "#errornote",
data: {
errornote: res.data
},

                                });

                            },
                            fail: function(err, status) {
                                console.log(err)
                            }
                        });

                    }
                }
            });

        }
    });
    errornote一个列表数据
    第一次触发点击事件的时候数据已经加载到html中  但是当我第二次点击的时候  html上显示的还是第一次的数据，我通过打印看了  我每次点击它请求出来的数据都是不同的但是不知道为什么html上没有更新  这个要怎么操作
    下面是html的代码
    <ul class="list-group note newerrornote">
                            <li v-for="i in errornote">
                                <div class="errortitle" style="width: 60%;">
                                    <a :href=i.link>{{i.title}}</a>
                                    <input type="text" name="" id="" :value=i.id style="display: none;" />
                                </div>
                                <div class="errorclick" style="width: 20%;">
                                    点击量：{{i.clicksum}}
                                </div>
                                <div class="erroraddtime">
                                    添加时间：{{i.addtime}}
                                </div>
                            </li>
                        </ul>

答主主要是写angular的，这种情况，可以考虑vue的异步的脏数据机制，也就是数据通过异步获得，却没有更新页面，异步环境是否需要触发vue刷新页面。