src/features/search/components/Searchbar.vue

@@ -14,9 +14,19 @@ See the License for the specific language governing permissions and
 limitations under the License.
 -->
 
+<script setup>
+const searchQuery = defineModel();
+</script>
+
 <template>
     <div class="search-wrapper">
-        <input type="search" name="search" placeholder="Search..." required />
+        <input
+            v-model="searchQuery"
+            type="search"
+            name="search"
+            placeholder="Search..."
+            required
+        />
         <button type="submit" class="search-button">Search</button>
     </div>
 </template>

src/views/SearchView.vue

@@ -15,7 +15,11 @@ limitations under the License.
 -->
 
 <script setup>
-import Searchbar from '../features/search/components/Searchbar.vue'
+import Searchbar from '../features/search/components/Searchbar.vue';
+
+import { ref } from 'vue';
+
+const searchQuery = ref('');
 </script>
 
 <template>
@@ -27,7 +31,7 @@ import Searchbar from '../features/search/components/Searchbar.vue'
     </header>
     
     <form class="search-form">
-        <Searchbar />
+        <Searchbar v-model="searchQuery" ref="searchbar" />
     </form>
 </template>