在ajax调用之后，Vue js会检索新数据

Question

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

这是我的代码

https://codepen.io/anon/pen/weobMP

HTML

<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> 

JS

$(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);
            });
            },            
        }
        });       
    })   
  });