diff --git a/components/common/CommonAlert.vue b/components/common/CommonAlert.vue
index cc2bd0c1..f9381c9a 100644
--- a/components/common/CommonAlert.vue
+++ b/components/common/CommonAlert.vue
@@ -2,9 +2,7 @@
 const emit = defineEmits<{
   (event: 'close'): void
 }>()
-const { modelValue: visible } = defineModels<{
-  modelValue?: boolean
-}>()
+const visible = defineModel<boolean>()
 
 function close() {
   emit('close')
diff --git a/components/common/CommonCheckbox.vue b/components/common/CommonCheckbox.vue
index 7cd7efcf..24e35855 100644
--- a/components/common/CommonCheckbox.vue
+++ b/components/common/CommonCheckbox.vue
@@ -5,9 +5,7 @@ defineProps<{
   iconChecked?: string
   iconUnchecked?: string
 }>()
-const { modelValue } = defineModels<{
-  modelValue?: boolean | null
-}>()
+const modelValue = defineModel<boolean | null>()
 </script>
 
 <template>
diff --git a/components/common/CommonCropImage.vue b/components/common/CommonCropImage.vue
index 6ab271e3..ca6bbee4 100644
--- a/components/common/CommonCropImage.vue
+++ b/components/common/CommonCropImage.vue
@@ -14,10 +14,7 @@ const props = withDefaults(defineProps<Props>(), {
   stencilSizePercentage: 0.9,
 })
 
-const { modelValue: file } = defineModels<{
-  /** Images to be cropped */
-  modelValue: File | null
-}>()
+const file = defineModel<File | null>()
 
 const cropperDialog = ref(false)
 
diff --git a/components/common/CommonInputImage.vue b/components/common/CommonInputImage.vue
index 6443e2a0..9366cdfe 100644
--- a/components/common/CommonInputImage.vue
+++ b/components/common/CommonInputImage.vue
@@ -22,9 +22,7 @@ const emit = defineEmits<{
   (event: 'error', code: number, message: string): void
 }>()
 
-const { modelValue: file } = defineModels<{
-  modelValue: FileWithHandle | null
-}>()
+const file = defineModel<FileWithHandle | null>()
 
 const { t } = useI18n()
 
diff --git a/components/common/CommonRadio.vue b/components/common/CommonRadio.vue
index c5328ad1..65f84e64 100644
--- a/components/common/CommonRadio.vue
+++ b/components/common/CommonRadio.vue
@@ -4,9 +4,7 @@ defineProps<{
   value: any
   hover?: boolean
 }>()
-const { modelValue } = defineModels<{
-  modelValue: any
-}>()
+const modelValue = defineModel()
 </script>
 
 <template>
diff --git a/components/common/CommonTabs.vue b/components/common/CommonTabs.vue
index bf720dba..8ab25672 100644
--- a/components/common/CommonTabs.vue
+++ b/components/common/CommonTabs.vue
@@ -8,9 +8,7 @@ const { options, command } = defineProps<{
   command?: boolean
 }>()
 
-const { modelValue } = defineModels<{
-  modelValue: string
-}>()
+const modelValue = defineModel<string>()
 
 const tabs = $computed(() => {
   return options.map((option) => {
diff --git a/components/list/ListEntry.vue b/components/list/ListEntry.vue
index 2aef27b6..7e426e2f 100644
--- a/components/list/ListEntry.vue
+++ b/components/list/ListEntry.vue
@@ -6,9 +6,7 @@ const emit = defineEmits<{
   (e: 'listUpdated', list: mastodon.v1.List): void
   (e: 'listRemoved', id: string): void
 }>()
-const { list } = defineModels<{
-  list: mastodon.v1.List
-}>()
+const list = defineModel<mastodon.v1.List>({ required: true })
 
 const { t } = useI18n()
 const client = useMastoClient()
diff --git a/components/modal/ModalDialog.vue b/components/modal/ModalDialog.vue
index aa58f509..9d91b755 100644
--- a/components/modal/ModalDialog.vue
+++ b/components/modal/ModalDialog.vue
@@ -52,10 +52,7 @@ const emit = defineEmits<{
   (event: 'close',): void
 }>()
 
-const { modelValue: visible } = defineModels<{
-  /** v-model dislog visibility */
-  modelValue: boolean
-}>()
+const visible = defineModel<boolean>({ required: true })
 
 const deactivated = useDeactivated()
 const route = useRoute()
diff --git a/components/modal/ModalMediaPreviewCarousel.vue b/components/modal/ModalMediaPreviewCarousel.vue
index 84d4718c..3e4b1279 100644
--- a/components/modal/ModalMediaPreviewCarousel.vue
+++ b/components/modal/ModalMediaPreviewCarousel.vue
@@ -12,9 +12,7 @@ const emit = defineEmits<{
   (event: 'close'): void
 }>()
 
-const { modelValue } = defineModels<{
-  modelValue: number
-}>()
+const modelValue = defineModel<number>({ required: true })
 
 const slideGap = 20
 const doubleTapTreshold = 250
diff --git a/components/nav/NavBottomMoreMenu.vue b/components/nav/NavBottomMoreMenu.vue
index e75e3736..78b25893 100644
--- a/components/nav/NavBottomMoreMenu.vue
+++ b/components/nav/NavBottomMoreMenu.vue
@@ -1,13 +1,11 @@
 <script lang="ts" setup>
-let { modelValue } = $defineModels<{
-  modelValue: boolean
-}>()
+const modelValue = defineModel<boolean>({ required: true })
 const colorMode = useColorMode()
 
 const userSettings = useUserSettings()
 
 function toggleVisible() {
-  modelValue = !modelValue
+  modelValue.value = !modelValue
 }
 
 const buttonEl = ref<HTMLDivElement>()
@@ -16,7 +14,7 @@ function clickEvent(mouse: MouseEvent) {
   if (mouse.target && !buttonEl.value?.children[0].contains(mouse.target as any)) {
     if (modelValue) {
       document.removeEventListener('click', clickEvent)
-      modelValue = false
+      modelValue.value = false
     }
   }
 }
diff --git a/components/notification/NotificationSubscribePushNotificationError.vue b/components/notification/NotificationSubscribePushNotificationError.vue
index 6b39b0a3..f4202eb9 100644
--- a/components/notification/NotificationSubscribePushNotificationError.vue
+++ b/components/notification/NotificationSubscribePushNotificationError.vue
@@ -3,9 +3,7 @@ defineProps<{
   title?: string
   message: string
 }>()
-const { modelValue } = defineModels<{
-  modelValue: boolean
-}>()
+const modelValue = defineModel<boolean>()
 </script>
 
 <template>
diff --git a/components/publish/PublishLanguagePicker.vue b/components/publish/PublishLanguagePicker.vue
index 7c128a08..06467052 100644
--- a/components/publish/PublishLanguagePicker.vue
+++ b/components/publish/PublishLanguagePicker.vue
@@ -1,9 +1,7 @@
 <script setup lang="ts">
 import Fuse from 'fuse.js'
 
-let { modelValue } = $defineModels<{
-  modelValue: string
-}>()
+const modelValue = defineModel<string>()
 
 const { t } = useI18n()
 const userSettings = useUserSettings()
@@ -24,7 +22,7 @@ const languages = $computed(() =>
           if (a === 'en')
             return -1
 
-          return a === modelValue ? -1 : b === modelValue ? 1 : a.localeCompare(b)
+          return a === modelValue.value ? -1 : b === modelValue.value ? 1 : a.localeCompare(b)
         }),
 )
 
@@ -41,7 +39,7 @@ const preferredLanguages = computed(() => {
 )
 
 function chooseLanguage(language: string) {
-  modelValue = language
+  modelValue.value = language
 }
 </script>
 
diff --git a/components/publish/PublishVisibilityPicker.vue b/components/publish/PublishVisibilityPicker.vue
index 5f777d25..f826bd65 100644
--- a/components/publish/PublishVisibilityPicker.vue
+++ b/components/publish/PublishVisibilityPicker.vue
@@ -3,16 +3,14 @@ const { editing } = defineProps<{
   editing?: boolean
 }>()
 
-let { modelValue } = $defineModels<{
-  modelValue: string
-}>()
+const modelValue = defineModel<string>()
 
 const currentVisibility = $computed(() =>
-  statusVisibilities.find(v => v.value === modelValue) || statusVisibilities[0],
+  statusVisibilities.find(v => v.value === modelValue.value) || statusVisibilities[0],
 )
 
 function chooseVisibility(visibility: string) {
-  modelValue = visibility
+  modelValue.value = visibility
 }
 </script>
 
diff --git a/components/settings/SettingsProfileMetadata.vue b/components/settings/SettingsProfileMetadata.vue
index 6bd033d6..cae497b3 100644
--- a/components/settings/SettingsProfileMetadata.vue
+++ b/components/settings/SettingsProfileMetadata.vue
@@ -1,11 +1,9 @@
 <script setup lang="ts">
 import type { mastodon } from 'masto'
 
-const { form } = defineModels<{
-  form: {
-    fieldsAttributes: NonNullable<mastodon.v1.UpdateCredentialsParams['fieldsAttributes']>
-  }
-}>()
+const form = defineModel<{
+  fieldsAttributes: NonNullable<mastodon.v1.UpdateCredentialsParams['fieldsAttributes']>
+}>({ required: true })
 const dropdown = $ref<any>()
 
 const fieldIcons = computed(() =>
diff --git a/pages/[[server]]/lists.vue b/pages/[[server]]/lists.vue
index 605d8dc6..a859415d 100644
--- a/pages/[[server]]/lists.vue
+++ b/pages/[[server]]/lists.vue
@@ -77,8 +77,8 @@ onDeactivated(() => clearError(false))
       <CommonPaginator ref="paginatorRef" :paginator="paginator">
         <template #default="{ item }">
           <ListEntry
-            :list="item"
-            @update:list="updateEntry"
+            :model-value="item"
+            @update:model-value="updateEntry"
             @list-removed="removeEntry"
           />
         </template>
diff --git a/pages/settings/profile/appearance.vue b/pages/settings/profile/appearance.vue
index 38d08960..aa083200 100644
--- a/pages/settings/profile/appearance.vue
+++ b/pages/settings/profile/appearance.vue
@@ -185,7 +185,7 @@ onReactivated(refreshInfo)
 
         <!-- metadata -->
 
-        <SettingsProfileMetadata v-if="isHydrated" v-model:form="form" />
+        <SettingsProfileMetadata v-if="isHydrated" v-model="form" />
 
         <!-- actions -->
         <div flex="~ gap2" justify-end>