Is there a simpler way to restructure an array of objects?

I am trying to organize a fetch api request into a sidebar UL list but need to restructure the object backwards. Is there a way a less complicated way to approach this without having to use a bunch of foreach statements? I do have the option of a second api endpoint I can use to maybe help.

API ENTRYPOINT 1 (Topics)

"topics": [
    {
        "name": "TOPIC_NAME",
        "subcategories": [
            {
                "name": "SUBCATEGORY_NAME",
                "category": "CATEGORY_NAME"
            },
            {
                "name": "SUBCATEGORY_NAME",
                "category": "CATEGORY_NAME"
            }
        ]
    },
    {
        "name": "TOPIC_NAME",
        "subcategories": [
            {
                "name": "SUBCATEGORY_NAME",
                "category": "CATEGORY_NAME"
            },
            {
                "name": "SUBCATEGORY_NAME",
                "category": "CATEGORY_NAME"
            }
        ]
    }
]

API ENTRY POINT 2 (Cateogries)

"categories": [
    {
        "name": "CATEGORY_NAME"
        "subcategories": [
            {
                "name": "SUBCATEGORY_NAME"
                "category": "CATEGORY_NAME"
            }
        ]
    }
]

To become a sidebar UL List like this

CATEGORY_NAME
 - SUBCATEGORY_NAME
    - TOPIC_NAME
    - TOPIC_NAME
 - SUBCATEGORY_NAME
    - TOPIC_NAME
CATEGORY_NAME
 - SUBCATEGORY_NAME
    - TOPIC_NAME
    - TOPIC_NAME
 - SUBCATEGORY_NAME
    - TOPIC_NAME

Since I am using Vue I am looking for something similar to this

<ul
    v-for="(category, i) in categories"
    :key="i"
>
    <ul
        v-for="(subcategories, j) in subcategories"
    >
        <li
            v-for="(topic, k) in topics"
        >
            <a v-if="subcategories[j].includes(topic.subcategories[n?].name) ">{{ topic.name }}</a>
        </li>
    </ul>
</ul>