title: Vue: empty array automatically populated with Observer object
body: <p>I'm trying to init an empty array in the data and then get a JSON from the server and populate it.</p>
  
  <p>The problem is that the array always have an extra Observer object so when i log it i see this:</p>
  
  <blockquote>
    <p>empty items array: [<strong>ob</strong>: Observer]</p>
  </blockquote>
  
  <p>here is a code excerpt:</p>
  
  <pre><code>data() {
          return {
              items: []
          }
      },
   created() {
           this.$http.get('/api/menus').then(function (response) {
  
              console.log('items before', this.items); //THIS LOGS items before: [__ob__: Observer]
               this.items = [].concat(response.body);
              this.items.forEach(function (item) {
                console.log('item', item);
  
                item.$add('active', false);
  
                item.tests.forEach(function (test) {
                    test.$add('active', false);
                });
          });
  
           }).catch(function (err) {
               console.error('err', err);
  
           });
  
       },
  </code></pre>
  
  <p>The problem is that when trying to add a new property to the objects in the array i get an error:</p>
  
  <blockquote>
    <p>err TypeError: item.$add is not a function</p>
  </blockquote>
  
  <p>when i debug i see it happens because it considers the observer object as part of the array.</p>
  
  <p>Is it normal? should i just check if $add exists? what about when rendering it in the view, does Vue ignore this object?</p>