Fix: Search query reload (#79)

* On every route change, update local variables from query params

* ResultSection is keyed to query to force re-render

* Resolved lint warnings

src/pages/SearchPage.vue

@@ -12,13 +12,18 @@
       </div>
     </div>
 
-    <ResultsSection v-if="query" :title="title" :api-function="search" />
+    <ResultsSection
+      v-if="query"
+      :key="query"
+      :title="title"
+      :api-function="search"
+    />
     <h1 v-else class="no-results">No query found, please search above</h1>
   </div>
 </template>
 
 <script setup lang="ts">
-  import { ref, computed } from "vue";
+  import { ref, computed, watch } from "vue";
   import { useRoute, useRouter } from "vue-router";
 
   import ResultsSection from "@/components/ResultsSection.vue";
@@ -45,6 +50,7 @@
 
   const title = computed(() => `Search results: ${query.value}`);
 
+  function readQueryParams() {
     const urlQuery = route.query;
     if (urlQuery && urlQuery?.query) {
       query.value = decodeURIComponent(urlQuery?.query?.toString());
@@ -52,6 +58,7 @@
       adult.value = Boolean(urlQuery?.adult) || adult.value;
       mediaType.value = (urlQuery?.media_type as MediaTypes) || mediaType.value;
     }
+  }
 
   const search = (
     _page = page.value || 1,
@@ -73,6 +80,12 @@
   function toggleChanged() {
     updateQueryParams();
   }
+
+  readQueryParams();
+  watch(
+    () => route.fullPath,
+    () => readQueryParams()
+  );
 </script>
 
 <style lang="scss" scoped>