JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.22/vue.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vuetify@1.5.12/dist/vuetify.min.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/vuetify@1.5.12/dist/vuetify.min.css">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900|Material+Icons">
<div id="app">
  <v-app id="inspire">
    <v-layout column>
      <v-text-field style="max-height: 50px" type="search" v-model="searchCountry" label="search country"></v-text-field>
      <v-list>
        <v-list-group
          no-action
          sub-group
          v-for="country in filteredCountries"
          :key="country.id"
          @click="getRegions(country.id)"
        >
          <v-list-tile slot="activator">
            <v-list-tile-action>
              <v-checkbox :label="country.name"></v-checkbox>
            </v-list-tile-action>
          </v-list-tile>
          <v-text-field
            style="max-height: 50px; padding-left: 48px"
            type="search"
            v-model="searchRegion[country.id]"
            label="search region"
          ></v-text-field>
          <v-list-group
            no-action
            sub-group
            v-for="region in filteredItems(searchRegion[country.id], country.regions)"
            :key="region.id"
            @click="getCities(region.id, country.id)"
          >
            <v-list-tile slot="activator">
              <v-list-tile-action>
                <v-checkbox :label="region.name"></v-checkbox>
              </v-list-tile-action>
            </v-list-tile>
            <v-text-field
              style="max-height: 50px; padding-left: 72px"
              type="search"
              v-model="searchCity[region.id]"
              label="search city"
            ></v-text-field>
            <v-list-tile v-for="city in filteredItems(searchCity[region.id], region.cities)" :key="city.id">
             ...

JavaScript

new Vue({
  el: '#app',
  data: () => ({
    geography: [
      'Russia',
      'USA',
      'Germany',
      'Italy',
      'China',
    ].map((name, i) => ({ name, id: i + 1 })),
    searchCountry: '',
    searchRegion: {},
    searchCity: {},
  }),
  computed: {
    filteredCountries() {
      return this.filteredItems(this.searchCountry, this.geography);
    },
  },
  methods: {
    filteredItems(search, array) {
      search = (search || '').toLowerCase();

      return search && array
        ? array.filter(item => item.name.toLowerCase().includes(search))
        : array;
    },
    getRegions(id) {
      const country = this.geography.find(item => item.id === id);
      if (!country.regions) {
        this.$set(country, 'regions', [
          {'name':'Region1', 'id': `${id}0`},
          {'name':'Region2', 'id': `${id}1`},
        ]);
      }
    },
    getCities(idRegion, idCountry) {
      const
        country = this.geography.find(item => item.id === idCountry),
        region = country.regions.find(item => item.id === idRegion);

      if (!region.cities) {
        this.$set(region, 'cities', [
          {'name':'City1', 'id': `${idCountry}${idRegion}0`},
          {'name':'City2', 'id': `${idCountry}${idRegion}1`},
        ]);
      }
    },
  },
});