refactor: use model-value

Author: MatteoGabriele

app/components/AppHeader.vue

@@ -147,7 +147,7 @@ onKeyStroke(
           class="max-w-sm"
           :class="{ 'max-w-md': !isSearchExpanded }"
           compact
-          v-model:search-query="searchQuery"
+          v-model="searchQuery"
           @submit="handleSearchSubmit"
           @focus="handleSearchFocus"
           @blur="handleSearchBlur"

app/components/SearchBox.vue

@@ -1,6 +1,5 @@
 <script setup lang="ts">
 defineProps<{
-  searchQuery: string
   compact?: boolean
 }>()
 
@@ -10,7 +9,7 @@ const emit = defineEmits<{
   (e: 'focus'): void
 }>()
 
-const searchQuery = defineModel<string>('searchQuery', {
+const searchQuery = defineModel<string>({
   default: '',
 })
 

app/pages/index.vue

@@ -55,7 +55,7 @@ defineOgImageComponent('Default', {
         <SearchBox
           class="max-w-xl motion-safe:animate-slide-up motion-safe:animate-fill-both"
           style="animation-delay: 0.2s"
-          v-model:search-query="searchQuery"
+          v-model="searchQuery"
           @submit="handleSearchSubmit"
         />