migrate i18n helper.js some code to typescript and migrate vue file to composition API and typescript

src/components/mobile/PasscodeInputSheet.vue

@@ -17,19 +17,19 @@
                         floating-label
                         clear-button
                         class="no-margin no-padding-bottom"
-                        :label="$t('Passcode')"
-                        :placeholder="$t('Passcode')"
+                        :label="tt('Passcode')"
+                        :placeholder="tt('Passcode')"
                         v-model:value="currentPasscode"
                         @keyup.enter="confirm()"
                     ></f7-list-input>
                 </f7-list>
                 <f7-button large fill
                            :class="{ 'disabled': !currentPasscode || confirmDisabled }"
-                           :text="$t('Continue')"
+                           :text="tt('Continue')"
                            @click="confirm">
                 </f7-button>
                 <div class="margin-top text-align-center">
-                    <f7-link :class="{ 'disabled': cancelDisabled }" @click="cancel" :text="$t('Cancel')"></f7-link>
+                    <f7-link :class="{ 'disabled': cancelDisabled }" @click="cancel" :text="tt('Cancel')"></f7-link>
                 </div>
             </div>
         </f7-page-content>
@@ -39,6 +39,8 @@
 <script setup lang="ts">
 import { type Ref, ref } from 'vue';
 
+import { useI18n } from '@/locales/helpers.ts';
+
 const props = defineProps<{
     modelValue: string
     title?: string
@@ -54,6 +56,8 @@ const emit = defineEmits<{
     (e: 'passcode:confirm', value: string): void
 }>();
 
+const { tt } = useI18n();
+
 const currentPasscode: Ref<string> = ref('');
 
 function confirm() {