Resolve "Rework references"

Closes #335 (closed)

components/content/ArticleDoi.vue

 <script setup lang="ts">
 import { useDisplay } from "vuetify";
-import { useArticlesStore } from '@/stores/articles'
+import type { WikiArticle } from '@/types/articles';
 
 export interface Props {
   index?: number;
@@ -19,10 +19,20 @@ const props = withDefaults(defineProps<Props>(), {
   isRelevant: false,
 });
 
-const { article } = useFetchArticle(props.doi);
+const article = ref<WikiArticle | undefined>(undefined)
 const { mobile } = useDisplay();
 const show = ref(false);
 
+onBeforeMount(async () => {
+  const { article: articleOnMounted } = await useFetchArticle(props.doi);
+  article.value = articleOnMounted.value
+})
+
+
+onMounted(async () => {
+  const { article: articleOnMounted } = await useFetchArticle(props.doi);
+  article.value = articleOnMounted.value
+})
 
 const articleTitle = computed(() => {
   return props?.title ?? article?.value?.title ?? props.doi;
@@ -32,16 +42,11 @@ const articleAbstract = computed(() => {
 });
 </script>
 <template>
-  <v-list-item :href="article?.href" :id="`ref-${props.doi}`" :target="article?.target" density="compact" color="transparent"
-    class="px-1">
+  <v-list-item :href="article?.href" :id="`ref-${props.doi}`" :target="article?.target" density="compact"
+    color="transparent" class="px-1">
     <template v-if="!mobile" #prepend>
       <v-icon icon="md:star" :color="props.isRelevant ? 'info' : 'transparent'"></v-icon>
     </template>
-    <!-- <template v-if="!mobile" #append>
-      <v-btn v-if="articleAbstract" size="x-small" variant="plain"
-        :append-icon="show ? 'mdi-chevron-up' : 'mdi-chevron-down'" class="px-0"
-        @click.stop.prevent="show = !show">Abstract</v-btn>
-    </template> -->
     <v-card flat color="transparent" density="compact" class="my-0 article-ref">
       <v-card-item density="compact" class="pa-0">
         <v-toolbar class="py-0 d-flex align-start article-toolbar" color="transparent" :height="20">
@@ -51,9 +56,6 @@ const articleAbstract = computed(() => {
             :append-icon="show ? 'mdi-chevron-up' : 'mdi-chevron-down'" class="px-1 align-center"
             @click.stop.prevent="show = !show">Abstract</v-btn>
         </v-toolbar>
-        <!-- <v-card-title class="py-0"><span class="font-weight-bold">{{
-            articleTitle
-          }}</span></v-card-title> -->
         <v-card-subtitle class="py-0">
           {{ article?.subtitle ?? "no authors" }}</v-card-subtitle>
         <v-card-subtitle class="py-0">