Компоненты vue?

Question

[Mothersprogrammer]

есть компонент поиска:

Vue.component('search', {
  data () {
      return {
        userSearch: ''
      }
    },
    template: 

    `
<form action="#" class="search-form"  @submit.prevent='this.$refs.filter(userSearch)'>
      <input type="text" class="search-field" v-model='userSearch'>
      <button type="submit" class="btn-search">
          <i class="fas fa-search"></i>
      </button>
    </form> 
    `

есть его использование в верстке:
<search ref="userSearch"></search>
есть метод, который должен срабатывать по событию submit:

filter(userSearch){
            let regexp = new RegExp(userSearch, 'i');
            this.filtered = this.products.filter(el => regexp.test(el.product_name));
        }

и есть ошибка которая выводится: Error in v-on handler: "TypeError: Cannot read property 'filter' of undefined"
если использовать в этой строке

<form action="#" class="search-form"  @submit.prevent='this.$refs.filter(userSearch)'>

не this.$refs.filter(userSearch)
, а $emit('search', userSearch)(при использовании такой записи метод будет выглядеть так

filter(){
            let regexp = new RegExp(this.userSearch, 'i');
            this.filtered = this.products.filter(el => regexp.test(el.product_name));
        }
),

то как бы все работает, но значение userSearch в объекте new Vue не обновляется на содержимое в input