Как вывести сразу несколько ссылок?

Question

[Junior Development]

Задача:
Вывести список пунктов меню.

<template>
    <div class="menu-catalog">
        <div class="catalog-item" v-for="item in items">
            <p class="title">{{item.title}}</p>
            <a href="#">{{item.links.join(' ')}}</a>
        </div>
    </div>
</template>

data() {
            return {
                items: [
                    {
                        title: 'Загловок 1',
                        links: [
                            'Ссылка 1',
                            'Ссылка 2',
                            'Ссылка 3',
                        ],
                    },
                    {
                        title: 'Загловок 2',
                        links: [
                            'Ссылка 4',
                            'Ссылка 5',
                        ],
                    },
                    {
                        title: 'Загловок 3',
                        links: [
                            'Ссылка 6',
                            'Ссылка 7',
                            'Ссылка 8',
                            'Ссылка 9',
                        ],
                    },
                ],

            }
        },

Подскажите пожалуйста, каким способом вывести ссылки?
У меня получатся вывести одну ссылку

<a data-v-325c1b48="" href="#">Ссылка 1 Ссылка 2 Ссылка 3</a>

а мне нужно разбить на несколько.

<a data-v-325c1b48="" href="#">Ссылка 1</a>
<a data-v-325c1b48="" href="#">Ссылка 2</a>
<a data-v-325c1b48="" href="#">Ссылка 3</a>

Answer 1

[0xD34F]

Вместо

<a href="#">{{item.links.join(' ')}}</a>

пусть будет

<a v-for="n in item.links" href="#">{{ n }}</a>