vue components?

Question

Vue.js

there is a search component:

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> 
    `

there is its use in layout: there is a method that should be triggered by the submit event:
<search ref="userSearch"></search>

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

and there is an error that is output: Error in v-on handler: "TypeError: Cannot read property 'filter' of undefined"
if used in this line

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

not this.$refs.filter(userSearch)
, but $emit('search', userSearch)(when using such a notation, the method will look like this

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

then everything seems to work, but the userSearch value in the new Vue object is not updated with the content in the input