How to implement search in a nested list?

Question

Vue.js

Hello! There is a hierarchy of geography (Country - region - city). When you click on a country, regions will be loaded from the server, when you click on a region, cities will be loaded. If we opened a region, then we need the ability to search for these regions. There is nothing complicated with countries, but there are no ideas with regions and cities. Tell me please.
https://codepen.io/Dgacarda/pen/QPVdZm?editors=1010

Answer 1

Since you're supposed to be able to search multiple countries/regions at the same time, it's kind of weird trying to use the same property for all search fields. Think for yourself - one property, twenty countries (for example). How are you going to store twenty values ​​in one string variable?
Make search strings properties of the objects you are searching within. That is, replace
v-model="searchRegion"
with
v-model="country.searchRegion"
Same with cities within regions .
Or you can make searchRegion and searchCity objects, where the keys will be the id of the countries / regions in which the search is performed. Somehow so .