如何处理vue.js中的对象

Question

我有一个vue组件，我通过推送一个json对象来填充数组。问题是vue将观察者添加到数组中，这使得无法迭代。可能有更好的方法在vuejs中使用数组。我知道观察者被添加以使对象被动反应但在这种情况下我不知道如何到达我的数据

我的代码：

app.js

require('./bootstrap');

window.Vue = require('vue');
import vueResource from 'vue-resource';
Vue.use(vueResource);

    Vue.component('search', require('./components/Searchnames.vue'));

    const a = new Vue({
      el: '#app',
    });

Search.vue

<template>
            <div class="row">
                <div class="col-md-5">
                <a href='#' class='pointer_panel panel-link'>
                <div class="panel panel-default panel-heading glow-border names">
                {{names}}
                    </div>
                </a>

                </div>
            </div>
    </template>


    <script>
        export default {
            data: function(){
                return {
                  names: []
                };

            },
            methods:  {
             getData: function(){
                 let self = this;
                 this.$http.jsonp(url, {jsonpCallback: "JSON_CALLBACK"})
                  .then(response=>{
                      console.log(response)
                   response.body.forEach(a => this.names.push(a))          
               })
            }
          },
           mounted: function() {    
                this.getData()
                console.log(this.names)
                console.log(this.names.length)        
                console.log('Component mounted.')

             }
        }
    </script>