title: Search input using a query using Vuex and Axios
body: <p>I'm trying to make a search input where I input a query and that query gets added to the API call and returns me the data that I want, here's a sample of my code</p>
  <pre><code>      &lt;input
      class=&quot;rounded-l-full w-full py-6 px-6 text-gray-700 leading-tight focus:outline-none&quot;
      id=&quot;search&quot;
      type=&quot;text&quot;
      placeholder=&quot;Search&quot;
      v-bind=&quot;query&quot;
    /&gt;
  
      &lt;button
        class=&quot;bg-blue-900 text-white rounded-full p-2 hover:bg-blue-700 focus:outline-none w-12 h-12 flex items-center justify-center&quot;
        @click=&quot;getSearchResults()&quot;
      &gt;
        &lt;font-awesome-icon :icon=&quot;['fas', 'search']&quot; /&gt;
      &lt;/button&gt;
  </code></pre>
  <p>My JS:</p>
  <pre><code>    &lt;script&gt;
  import { mapActions, mapGetters, mapState } from &quot;vuex&quot;;
  
  export default {
    name: &quot;Main&quot;,
    data() {
      return {};
    },
    computed: {
      ...mapGetters([&quot;searchResult&quot;]),
      ...mapState({
        query: (state) =&gt; state.query,
      }),
    },
    methods: {
      ...mapActions([&quot;getSearchResults&quot;]),
    },
  };
  &lt;/script&gt;
  </code></pre>
  <p>My vuex module:</p>
  <pre><code>    import axios from &quot;axios&quot;;
  
  const state = {
    results: [],
    query: &quot;&quot;,
  };
  
  const getters = {
    searchResult: (state) =&gt; state.results,
  };
  
  const actions = {
    async getSearchResults() {
      let query = state.query;
      const res = await axios.get(
        `https://www.theaudiodb.com/api/v1/json/1/search.php?s=${query}`
      );
  
      res.data.artists.forEach((artist) =&gt; state.results.push(artist));
    },
  };
  
  const mutations = {
    returnResults: (state, results) =&gt; (state.results = results),
  };
  
  export default {
    state,
    getters,
    actions,
    mutations,
  };
  </code></pre>
  <p>The search query is not getting passed on the input, if I put something on the query from the Vuex module I get the correct results but if I input something and click the search button I get the default results of the api JSON which means my input is not working, I'd appreciate some help and thanks in advance!</p>