Problème accès données JSON

Bonjour,

Je poste ce message car je suis en train de recréer un site que j'avais fait en Symfony il y a quelque temps, en VueJS 3. 

Je voudrai à terme récupérer les données générées par mon Symfony via API Platform, mais actuellement j'ai juste mis mes données JSON en dur dans mon VueJS.

Mon site est un album photo avec un système d'utilisateur, de tags etc, et je veux récupérer chaque photo et l'afficher sous l'utilisateur correspondant, ce que j'ai réussi à faire, mais le problème est que cela ne fonctionne pas pour les tags : je boucle en HTML sur mes données JSON et je n'arrive pas à afficher les tags correctement, voici mon code : 

JSON :

import { defineStore } from 'pinia'

export const useDefaultStore = defineStore({
  id: 'default',
  state: () => ({

      users: [
        {
          "@context": "/api/contexts/User",
          "@id": "/api/users",
          "@type": "hydra:Collection",
          "hydra:totalItems": 2,
          "hydra:member": [
            {
              "@id": "/api/users/1",
              "@type": "User",
              "id": 1,
              "username": "Fabrice",
              "password": "$2y$13$FpK40kmNQ4HZqwx26JMNTOQ3roMLOL7XIV7qdZ05l.Q0YV.qqdh7u",
              "photos": [
                "/api/photos/1",
                "/api/photos/2",
                "/api/photos/3"
              ],
              "tags": [
                "/api/tags/1",
                "/api/tags/2",
              ],
              "roles": [
                "ROLE_USER"
              ],
              "userIdentifier": "Fabrice"
            },
            {
              "@id": "/api/users/2",
              "@type": "User",
              "id": 2,
              "username": "Alex",
              "password": "$2y$13$veBfXHieQ1bRxympVlZ1RuZ6IcciT2E961TKA1hzmPKww1/g4M8g6",
              "photos": [],
              "tags": [
                "/api/tags/3",
              ],
              "roles": [
                "ROLE_USER"
              ],
              "userIdentifier": "Alex"
            }
          ]
        }
    ],

      photos: [
        {
          "@context": "/api/contexts/Photo",
          "@id": "/api/photos",
          "@type": "hydra:Collection",
          "hydra:totalItems": 4,
          "hydra:member": [
            {
              "@id": "/api/photos/1",
              "@type": "Photo",
              "id": 1,
              "description": "des planetes",
              "path": "uploads/images/Planetes.jpg",
              "nom": "Planetes",
              "categorie": "/api/categories/1",
              "user": "/api/users/1",
              "tags": [
                "/api/tags/1",
                "/api/tags/2"
              ]
            },
            {
              "@id": "/api/photos/2",
              "@type": "Photo",
              "id": 2,
              "description": "un arbre",
              "path": "uploads/images/Arbre.jpg",
              "nom": "Arbre",
              "categorie": "/api/categories/2",
              "user": "/api/users/1",
              "tags": []
            },
            {
              "@id": "/api/photos/3",
              "@type": "Photo",
              "id": 3,
              "description": "encore des planetes",
              "path": "uploads/images/Planetes 2.jpg",
              "nom": "Planetes 2",
              "categorie": "/api/categories/1",
              "user": "/api/users/1",
              "tags": [
                "/api/tags/1"
              ]
            },
            {
              "@id": "/api/photos/4",
              "@type": "Photo",
              "id": 4,
              "description": "planetesss",
              "path": "uploads/images/planneete.jpg",
              "nom": "planneete",
              "categorie": "/api/categories/1",
              "user": "/api/users/2",
              "tags": [
                "/api/tags/3"
              ]
            }
          ]
        }
      ],
    
      tags: [
        {
          "@context": "/api/contexts/Tag",
          "@id": "/api/tags",
          "@type": "hydra:Collection",
          "hydra:totalItems": 1,
          "hydra:member": [
            {
              "@id": "/api/tags/1",
              "@type": "Tag",
              "id": 1,
              "nom": "mon tag",
              "photos": [
                "/api/photos/1",
                "/api/photos/3"
              ],
              "user": "/api/users/1"
            },

            {
              "@id": "/api/tags/2",
              "@type": "Tag",
              "id": 2,
              "nom": "mon deuxieme tag",
              "photos": [
                "/api/photos/1",      
              ],
              "user": "/api/users/1"
            },

            {
              "@id": "/api/tags/3",
              "@type": "Tag",
              "id": 3,
              "nom": "mon alex tag",
              "photos": [
                "/api/photos/4",            
              ],
              "user": "/api/users/2"
            }
          ]
        }
      ],
          
     
  }),
  getters: {

  },
  actions: {

})

HTML (composant Tag) :

<template>
<span v-for="(tag, i) in props.tags[0]['hydra:member']" :key="i">
  <span v-if="props.actualPhoto.tags[i]===tag['@id']">
    {{ props.tags[0]['hydra:member'][i].nom }} <br>
  </span>
</span>
</template>
  
  <script setup>  
  import { useDefaultStore } from '../stores/index'
  import { onMounted, ref, computed } from 'vue'
  import { useRouter, useRoute } from 'vue-router'
  
  const store = useDefaultStore()
  const router = useRouter()
  const route = useRoute()
      
  onMounted(() => {

  })  

  
  
  const props = defineProps({
    tags: {
      type: Array,
    },
    actualPhoto: {
      type: Object,
    },
    actualUser: {
      type: Object
    }
  })
    
  </script>
  
  <style>
  </style>

HTML (composant Photo) :

<template>
  <div v-for="user in props.users[0]['hydra:member']">
    <h1>Album de {{ user.username }}</h1>
      <figure v-for="photo in props.photos[0]['hydra:member']">
        <span v-if="user['@id'] == photo.user">
          <img :src="'http://127.0.0.1:8000/' + photo.path">
        <figcaption>
          <div v-if="photo.tags.length>0">
            <Tags :tags="tags" :actualPhoto="photo" :actualUser="user"/> 
          </div>
          <p>{{ photo.nom }}</p>
          <p>{{ photo.description }}</p>
        </figcaption>
        </span>
      </figure>
  </div>
</template>

<script setup>
import { useDefaultStore } from '../stores/index'
import { onMounted, ref, computed } from 'vue'
import { useRouter, useRoute } from 'vue-router'
import Tags from './Tags.vue'
const store = useDefaultStore()
const router = useRouter()
const route = useRoute()
const tags = store.tags
    
    onMounted(() => {
        console.log('Le composant Photos est chargé')
    })  

const props = defineProps({
  photos: {
    type: Array,
  },
  users: {
    type: Array,
  }
})
</script>

<style>
</style>

HTML (composant Home) :

<template>
 
  
  <Photos :photos="photos" :users="users"/>

    
</template>
    
    <script setup>
    import User from './Home.vue'
    import Photos from './Photos.vue'
    import { useDefaultStore } from '../stores/index'
    import { useRouter, useRoute } from 'vue-router'
    import { onMounted, ref, computed } from 'vue'

    const router = useRouter()
    const route = useRoute()
    
    onMounted(() => {
        console.log('Le composant Home est chargé')
    })  
    
    const store = useDefaultStore()
    const photos = store.photos
    const users = store.users
    
    </script>

    <style>
    </style>

Je passe mes données entre composants etc, et j'ai bien accès aux données dans le HTML que j'envoie, le problème vient de la boucle et je ne trouve pas où il est.

Merci pour votre lecture !