title: Vue.js - Data Property isn't accessible
body: <p>I have a Vue.js 3 app. In this app, I'm trying to search through an array of object. I've created a fiddle <a href="https://jsfiddle.net/fs3ry2qw/" rel="nofollow noreferrer">here</a>. In this fiddle, the code causing the issue looks like this:</p>
  <pre><code>async runSearch() {
    let searchResults = this.data;
    if (this.searchQuery) {
      let info = JSON.stringify(searchIndex);
      alert(info);
      console.log(searchIndex);
      searchResults = await courseIndex.search(courses);
    }
    this.results = searchResults;
  }
  </code></pre>
  <p>For some reason, it's like <code>searchIndex</code> doesn't exist. However, I do have it in the model as shown here:</p>
  <pre><code>  data() {
      return {
        searchIndex: null,
        searchQuery: null,      
        data: data,
        results: null,
      }
    }
  </code></pre>
  <p>What am I doing wrong? Why can't I execute a search?</p>