<template>
  <div>
    <h2>Welcome to Gourav's Homepage</h2>
    <input type="text" placeholder="Filter Search" v-model="query" />
    <button @click="reset">Reset</button>
  </div>
  <div>
    {{ query }}
    <search-results :query='query' />
  </div>
</template>

<script>
import { ref } from "vue";
import SearchResults from './SearchResults.vue';

export default {
  components: {
    SearchResults,
  },

  setup() {
    const query = ref("");

    const reset = (evt) => {
      query.value = ""; // clears the query
    };

    return {
      query,
      reset,

    };
  },
};
</script>
