title: Why is there an Observer instead of my array?
body: <p>My Vue Component consists of i.e. this code:</p>
  
  <pre><code>&lt;script&gt;
  export default {
    data() {
      return {
        sailNames: []
      }
    },
    methods: {
      showName: function(e) { // [3] called by @click event from DOM
        console.log(this.sailNames); // [4] shows: [__ob__: Observer]
      },
      getJsonData() { // [1] called on created() hook
        $.getJSON("./src/res/sails.json", function(data) {
          const sailNames = [];
          $.each(data, function(i, names) {
            sailNames.push(names);
          });
          this.sailNames = sailNames;
          console.log(this.sailNames);
          console.log(sailNames); // [2] both logs give the same output
        });
      }
    }
  }
  (...)
  </code></pre>
  
  <p>I'm wondering, why I get this <code>[__ob__: Observer]</code> when logging the state at point [4]. As you see, the array is defined in the <code>data</code> section, then it gets values from a local variable and check is made: both local and global variables are identical (point [2]).</p>
  
  <p>Then, when a user clicks on an element with <code>showName</code> method assigned (pt. [3]), I'd expect to see the same output as in pt. [2], but instead that <code>[__ob__: Observer]</code> appears in the console.</p>
  
  <p>What is happening there? How should I call the array to get its values?</p>