[Vuejs]-How to implement search functionality with Laravel lighthouse-php and vuejs?

Finally resolve my issue:

  <div class="py-16 px-16 text-gray-800">
    <div>
      Search
      <input v-model="search" type="search" @input="searchResults()" />
    </div>
    <div v-if="products">
      <div v-for="product in products.data" :key="product.slug">
        <NuxtLink
          :to="{ name: 'products-slug', params: { slug: product.slug } }"
          >{{ product.name }}</NuxtLink
        >
      </div>
    </div>
  </div>
</template>

<script>
import ALL_PRODUCTS from '@/graphql/AllProducts.gql'

export default {
  apollo: {
    products: {
      fetchPolicy: 'network-only',
      query: ALL_PRODUCTS,
      variables() {
        return {
          searchText: this.search,
        }
      },
      skip() {
        return !this.search
      },
    },
  },
  data() {
    return {
      search: '',
    }
  },
  methods: {
    searchResults() {
      return this.products
    },
  },
  head: {
    title: 'Products',
  },
}
</script>