vue.js - Vue js http リクエスト ループ

Question

ユーザー入力があるたびに http 要求を呼び出すライブ検索フォームを作成しようとしています。これまでのところ、ライブ検索はうまく機能していますが、http 要求がループに陥っています。この問題は、catalog_items を this.items に割り当てるときに発生します。

Vue.js

Vue.filter('searchFor', function (value, searchString) {

    var result = [];

    if(!searchString || searchString.length < 2){
        return value;
    }

    searchString = searchString.trim().toLowerCase();

    this.fetchData(searchString);
    result = this.items;

    return result;
})

new Vue({
    el: '#searchform',
    data: {
        searchString: "",
        items: []
    },
    methods: {
        fetchData: function (name) {
            this.$http.get('api_url' + name )
            .then(function(response){
                var data = response.data;
                var catalog_items = data['catalog_items'];
                this.items = catalog_items;
            })
        }
    }
})

HTML 検索入力:

<input type="text" v-model="searchString" placeholder="Enter your search terms" />
<ul>
    <li v-for="item in catalog_items | searchFor searchString">
        <p>@{{item.name}}</p>
    </li>
</ul>

前もって感謝します！