尽管控制台没有错误，Lunr.js搜索仍无法在VueJS中运行

Question

我正在尝试在VueJS中使用http://lunrjs.com/进行搜索。

我正在将通过JSON检索的数据传递给LunrJS函数，还发送字段并期望搜索结果，但是搜索之后，我一无所获。

Chrome控制台中没有错误。

请帮助。

这是我的视图js文件

     <template>
     <div id="show-original">

       <input type="text" placeholder="type to search"
       v-model="search"
       @input="$emit('update:search', $event.target.value)" />
        <p>Number of results: {{list.length}}</p>

     <ul>
     <li v-for="item in list" :key="item.id">
          {{item.title}}
          <br>
         Speed: {{ item.speed }}
         <br>
         Glide: {{ item.glide }}
         <br>
     </li>    
     </ul>
     </div>
 </template>

<script>
export default {
    data(){
    return{
       original:[],
       list:[],
       search:'',
       resuls:[],
       searchIndex:null
    }
  },
  mounted(){
    this.$axios('https://api.myjson.com/bins/te9h0')
       .then(data => {
          this.original = data.data
          this.list = this.original
          this.buildIndex()
      })

    this.$watch('search', () => {
      this.resuls = this.searchIndex.search(this.search)

      this.list = []
      this.resuls.forEach(d => {
        this.original.forEach(p => {
          if(d.ref == p.id) this.list.push(p)
        })

      })
    })
  },
  methods:{
    buildIndex(){
      var documents = this.original
      this.searchIndex = this.$lunr(function () {
        this.ref('id')
        this.field('title')
        this.field('speed')
        this.field('glide')

        documents.forEach(doc => {
          this.add(doc)
        })
      })
    }
  }
}
</script>

我遵循了本教程https://fabiofranchino.com/blog/how-to-make-a-client-side-search-engine-with-vue-and-lunr/，并使用了https://codepen.io/abusedmedia/pen/GzjJEP中的代码 它可以在CodePen上使用，但不适用于我。