【Vue】アロー関数では動くが、従来の関数では動かないプログラム

前提

配列の中身を見て、リアルタイムに検索結果が表示される絞り込み検索を実装中です。
filterとincludesを使って実装してみましたが、アロー関数では動くのですが従来の関数では動かないです。
初心者なので良くわからないのですが、原因はアロー関数のthisの挙動かと思っていますがもしそうでしたら詳しく説明していただけると大変助かります。
もし他に原因があるのでしたら、そちらもご教授いただけると助かります。

発生している問題・エラーメッセージ

該当のソースコード

HTML
1<div id="app" class="container" v-cloak>
2   <h1>{{ h1Title }}</h1>
3   <label for="search">検索したい文字を入力してね</label>
4   <input type="text" id="search" v-model="search">
5   <ul>
6    <li v-for="item in filterFunction" v-bind:key="item.id">{{ item.name }}</li>
7   </ul>
8  </div>

JS
1new Vue({
2  el: '#app',
3  data: {
4    h1Title: 'Vue Search Component',
5    search: '',
6    array: [
7      {id: 0, name: 'Captain Marvel'},
8      {id: 1, name: 'Thanos'},
9      {id: 2, name: 'Black Panther'},
10      {id: 3, name: 'Spider-Man'},
11      {id: 4, name: 'Iron Man'},
12      {id: 5, name: 'Captain America'},
13      {id: 6, name: 'Black Widow'},
14      {id: 7, name: 'Hulk'},
15      {id: 8, name: 'Thor'},
16      {id: 9, name: 'Hawkeye'}
17    ]
18  },
19  computed: {
20    filterFunction() {
21    return this.array.filter(function (value) {
22        return value.name.toLowerCase().includes(this.search.toLowerCase())
23    })
24    }
25  }
26})