feat(useApi): better interface

app/components/AppFooter.vue

@@ -4,7 +4,7 @@
       <div class="flex flex-col gap-2">
         <p class="text-text-800 text-sm">Copyright &copy; {{ new Date().getFullYear() }}</p>
         <p class="text-text-800 text-sm">{{ $t('footer.versions.frontend') }}: {{ version }}</p>
-        <p class="text-text-800 text-sm">{{ $t('footer.versions.backend') }}: {{ meta?.version }}</p>
+        <p class="text-text-800 text-sm">{{ $t('footer.versions.backend') }}: {{ backendVersion }}</p>
       </div>
     </template>
 
@@ -30,7 +30,10 @@ import { version } from '../../package.json';
 const { isMobile } = useDevice();
 const orientation = computed(() => (isMobile ? 'vertical' : 'horizontal'));
 const { getMeta } = useBackend();
-const meta = await getMeta();
+const { data, error, loading } = getMeta();
+const backendVersion = computed(() =>
+  loading.value ? 'backend.loading' : data?.value?.version || $t('backend.failed'),
+);
 const items = computed<NavigationMenuItem[]>(() => [
   {
     label: $t('footer.links.source'),