JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.6.14/vue.js"></script>

<div id="app">
  <select v-for="n in selectData" v-model="n.info.value">
    <option value="">&lt; {{ n.info.placeholder }} &gt;</option>
    <option v-for="{ name } in n.items">{{ name }}</option>
  </select>
  <pre>{{ selectedValues }}</pre>
</div>

JavaScript

new Vue({
  el: '#app',
  data: () => ({
    treeInfo: [
      { value: '', placeholder: 'Выберите континент' },
      { value: '', placeholder: 'Выберите страну' },
      { value: '', placeholder: 'Выберите город' },
    ],
    treeItems: [
      { name: 'Африка', children: [
        { name: 'ЮАР', children: [
          { name: 'Претория' },
          { name: 'Йоханнесбург' },
          { name: 'Кейптаун' },
        ] },
        { name: 'Египет', children: [
          { name: 'Каир' },
          { name: 'Александрия' },
          { name: 'Порт-Саид' },
        ] },
      ] },
      { name: 'Европа', children: [
        { name: 'Италия', children: [
          { name: 'Рим' },
          { name: 'Милан' },
          { name: 'Неаполь' },
        ] },
        { name: 'Германия', children: [
          { name: 'Берлин' },
          { name: 'Гамбург' },
          { name: 'Мюнхен' },
        ] },
        { name: 'Франция', children: [
          { name: 'Париж' },
          { name: 'Марсель' },
          { name: 'Лион' },
        ] },
        { name: 'Испания', children: [
          { name: 'Мадрид' },
          { name: 'Барселона' },
          { name: 'Севилья' },
        ] },
      ] },
      { name: 'Азия', children: [
        { name: 'Вьетнам', children: [
          { name: 'Хошимин' },
          { name: 'Ханой' },
          { name: 'Дананг' },
        ] },
        { name: 'Япония', children: [
          { name: 'Токио' },
          { name: 'Киото' },
          { name: 'Нагоя' },
        ] },
        { name: 'Китай', children: [
          { name: 'Пекин' },
          { name: 'Шанхай' },
          { name: 'Циндао' },
        ] },
      ] },
    ],
  }),
  computed: {
    selectData() {
      const data = [];

      let items = this.treeItems;
      do {
        const info = this.treeInfo[data.length];
        data.push({ info, items });
        items = items.find(n => n.name === info.value)?.children;
      } while (items);

      return data;
    },
   ...