diff --git a/src/components/SearchBar.vue b/src/components/SearchBar.vue
index bcf0cbf..c63b3d4 100644
--- a/src/components/SearchBar.vue
+++ b/src/components/SearchBar.vue
@@ -1,9 +1,25 @@
+<script lang="ts">
+export default {
+  setup() {
+    return {
+      searchInput: "",
+    }
+  },
+  methods: {
+    redirectToSearch() {
+      const query = this.searchInput
+      this.$router.push({ path: '/search', query: { query }})
+    }
+  }
+}
+</script>
+
 <template>
     <div class="relative hidden md:block">
         <label for="searchBar" class="hidden">Search</label>
         <v-icon name="io-search-outline" class="text-black absolute my-auto inset-y-0 left-2"></v-icon>
         <input type="text" placeholder="Search"
-            @keyup.enter="this.$router.push('/search?query=' + this.$refs.searchInput.value)"
+            @keyup.enter=redirectToSearch v-model="searchInput"
             class="rounded-md p-1 pl-8 text-black" ref="searchInput" />
     </div>
 </template>
\ No newline at end of file