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,12 +50,14 @@
 
   const title = computed(() => `Search results: ${query.value}`);
 
-  const urlQuery = route.query;
+  function readQueryParams() {
-  if (urlQuery && urlQuery?.query) {
+    const urlQuery = route.query;
-    query.value = decodeURIComponent(urlQuery?.query?.toString());
+    if (urlQuery && urlQuery?.query) {
-    page.value = Number(urlQuery?.page) || 1;
+      query.value = decodeURIComponent(urlQuery?.query?.toString());
-    adult.value = Boolean(urlQuery?.adult) || adult.value;
+      page.value = Number(urlQuery?.page) || 1;
-    mediaType.value = (urlQuery?.media_type as MediaTypes) || mediaType.value;
+      adult.value = Boolean(urlQuery?.adult) || adult.value;
+      mediaType.value = (urlQuery?.media_type as MediaTypes) || mediaType.value;
+    }
   }
 
   const search = (
@@ -73,6 +80,12 @@
   function toggleChanged() {
     updateQueryParams();
   }
+
+  readQueryParams();
+  watch(
+    () => route.fullPath,
+    () => readQueryParams()
+  );
 </script>
 
 <style lang="scss" scoped>