Как создать вложенный список из объекта Vue?

Question

[Rufix]

countries: [
        {
          country: 'Россия',
          regions: [
            {
              region: 'Московская область',
              cities: [
                {
                  city: 'Москва',
                  coord: [55.751244, 37.618423]
                },
                {
                  city: 'Балашиха',
                  coord: [37.9679867, 55.7981904]
                },
              ]
            }
          ]
        }
      ]

Есть такой объект и нужно, чтобы выводился сначала список стран, потом внутри списка страны список областей и внутри списка областей - список городов.
Все что у меня получилось - вывести список стран

<ul>
      <li v-for="(country, name) in countries">
        {{country.name}}
      </li>
</ul>

Answer 1

[0xD34F]

Нужны отдельные компоненты для страны, региона и города - компонент страны выводит список своих регионов, компонент региона список городов. Например. Или, можно делать компоненты не под отдельные элементы, а под списки - список стран, список регионов, список городов - будет примерно то же самое.