Javascript Vue js在ajax调用后检索新数据

我有一个按钮，当我点击这个按钮，我检索数据。但是，当我单击“第二种方式”时，我不会检索新数据

这是我的密码

Html

---

你做错了，伙计。您正在混合所有内容，使用jQuery事件并从这些事件创建Vue对象。我建议你参加Vue课程或其他什么。这个是免费的，非常好，谢谢：）但是你知道如何解决这个问题吗。重新绑定数据的简单方法…您将无法在每次单击时保持重新绑定，而是需要将单击事件绑定到视图模型中的方法。如果您刚开始使用Vue（可以用于ajax调用），我还建议您完全抛弃jQuery，这将迫使您以一致的方式进行操作，而不是尝试将您知道的东西拼凑在一起。然后你可以在这里问任何你不明白的事情。我解决了问题，只有一个实例可以使用。你做错了，伙计。您正在混合所有内容，使用jQuery事件并从这些事件创建Vue对象。我建议你参加Vue课程或其他什么。这个是免费的，非常好，谢谢：）但是你知道如何解决这个问题吗。重新绑定数据的简单方法…您将无法在每次单击时保持重新绑定，而是需要将单击事件绑定到视图模型中的方法。如果您刚开始使用Vue（可以用于ajax调用），我还建议您完全抛弃jQuery，这将迫使您以一致的方式进行操作，而不是尝试将您知道的东西拼凑在一起。然后你可以在这里问任何你不明白的问题。我已经解决了问题，只能使用一个实例

<button type="submit" class="btn btn-sm btn-success form-control" id="click">Filter</button>

<div class="col-md-6 cart-items" id="myjp">
   <div v-for="(item, index) in items">     
      <div class="panel panel-info">
          <div class="panel-heading" v-on:click="greet">
              <h3 {{index+1}} {{item.Car}}</h3>
                </div>
                <div class="mojbody panel-body" v-for="tire in item.tires">
                    Tire: {{tire.Name}}
                </div>
            </div>
         </div>
</div> 

$(function() {
  var id = 1;
$("#click").click(function(){
        id++;
        new Vue({
            el: '#myjp',
        data: {
            items: null
        },
        created: function () {
            this.fetchData();                     
        },
        methods: {
            fetchData: function () {
            var self = this;
            $.get('/retriveHistory',{id: id}, function( data ) {
                self.items = data;
                console.log(data);
            });
            },            
        }
        });       
    })   
  });