Search bar will not reload when hitting button, but only on the actual search page

I am using Semantic UI, Ember, and a movie API to create a website. I am creating a search bar that allows someone to search through all the movies in the API. These movies are not stored on the webpage and so I call the API with the API key and the specific movie name which I pull from the search bar. The search bar is part of the Nav bar which is a part of all the pages in the website.

<div class="ui action input">
      <input type="text" id="myInput" placeholder="Search for movies...." title="Type in a movie" value="">
      <LinkTo @route="search">
        <button class="ui icon button"  type="submit" id="myBtn" onclick="myFunction1">
          <i class="search icon"></i>
        </button>
      </LinkTo>
    </div>

I have this placed in the Search.js file so that when the search button is hit, the word is taken and loaded into the page.

   async model(params) {
        //set up api  
        var x = document.getElementById("myInput").value; 
      
        const response = await fetch('https://api.themoviedb.org/3/search/movie?api_key=4517228c3cc695f9dfa1dcb4c4979152&language=en-US&query='
        + x + '&page=1&include_adult=false');
        const data = await response.json();

        //return results portion of json
        return data.results;
    }

My search page itself is just formatting the movies that show up, it works perfectly fine on every page except for the Search page after the movies are loaded in. It will not search again unless I travel outside the search page. I can't seem to figure a way out how to make this search bar work inside the search page.