References.vue

<template>
  <section id="references">
    <div class="text-container title-text">
      <h3>{{ t('referencesText.referencesContent.title') }}</h3>
    </div>
    <div class="text-container">
      <div v-for="reference in t('referencesText.referencesContent.references')" :key="reference.num">
        <p>{{  reference }}</p>
        <p>
          <span>{{ reference.num }}</span>. 
          <span>{{ reference.authors }}</span>,
          <span>{{ reference.year }}</span>,
          <a :href="reference.link" target="_blank">{{ reference.title }}</a>
          <span v-if="reference.type !== ''">, </span>{{ reference.type }}
          <span v-if="reference.ref !== ''">, </span>{{ reference.ref }}.
        </p>
      </div>
    </div>
  </section>
</template>

<script setup>
import { useI18n } from 'vue-i18n';

const { t } = useI18n();  // This gives you access to translation strings
console.log(t('referencesText'));
</script>

<style scoped>
button:not([disabled]):focus {
  outline: none;
}
</style>