How to handle search with $emit value?

I have search input field in header component. I’m getting emitted value but it’s doesn’t filter content. How do i pass $fetch with $emit from header component or what is the right way?

Index.vue

import Header from '@/components/layout/header';
export default {
  components: {
    Header
  },
  data() {
    return {
      posts: [],
      q: ''
    }
  },
  async fetch() {
    this.posts = await this.$content('posts')
    .search(this.q)
    .fetch()
  }
}

Header.vue

<template>
<div>
<input type="search" placeholder="Type your search" v-model="q" @input="$emit('q', $event)">
</div>
</template>
<script>
export default {
  props: [ 'q' ]
}
</script>

[Atinux]

Then you need to add a method onSearch to update q and call fetch() again

[Atinux]

I think that you can call this.$fetch() instead of this.$content('posts')..