update component that use useFetchArticle with new api

components/content/ArticleReference.vue

-<script setup lang="ts">
-import { useDisplay } from "vuetify";
-
-export interface Props {
-    index?: number;
-    doi: string;
-    divider?: boolean;
-    enumerate?: boolean;
-    title?: string;
-    abstract?: string;
-}
-
-const props = withDefaults(defineProps<Props>(), {
-    enumerate: true,
-    divider: false,
-});
-const { article } = useFetchArticle(props.doi);
-const { mobile } = useDisplay();
-
-const articleTitle = computed(() => {
-    return props?.title ?? article?.value?.title ?? props.doi;
-});
-
-const articleAuthorsString = computed(() => {
-    // console.log(article.value)
-    // console.log(props.doi)
-    return article.value?.author?.length > 0 ? `${article.value.author[0].family} & al` : null
-})
-
-</script>
-<template>
-    <v-list-item v-if="article" :href="article?.href" :id="`ref-${props.doi}`" :target="article?.target" density="compact"
-        class="px-1">
-        <template #prepend v-if="!mobile && enumerate">
-            <v-avatar color="primary" size="small" density="compact" variant="tonal">
-                {{ props?.index ?? "#" }}
-            </v-avatar>
-        </template>
-
-        <template #title>
-            <span class="text-subtitle-1 font-weight-bold">{{
-                articleTitle
-            }} </span>
-
-        </template>
-        <template #subtitle><span class="text-caption">{{ articleAuthorsString }}</span></template>
-        <template #append v-if="!mobile">
-            <span> {{ article?.containerTitle ?? "no containerTitle" }} ({{
-                article?.year
-            }})</span>
-        </template>
-
-    </v-list-item>
-    <v-divider v-if="props.divider" inset></v-divider>
-</template>
\ No newline at end of file

components/content/RefArticle.vue

 <script setup lang="ts">
 import { useTheme } from "vuetify";
+import type { WikiArticle } from '@/types/articles';
+
+
 const theme = useTheme();
 export interface Props {
     doi: string;
 }
 const props = withDefaults(defineProps<Props>(), {});
-
-const { article } = useFetchArticle(props.doi);
+const article = ref<WikiArticle | undefined>(undefined)
+// const { article } = useFetchArticle(props.doi);
+onBeforeMount(async () => {
+    const { article: articleOnMounted } = await useFetchArticle(props.doi);
+    article.value = articleOnMounted.value
+})
 </script>
 <template>
     <!-- <v-chip v-if="article" variant="text" :href="`#ref-${props.doi}`" class="pa-0 font-italic">{{