title: Using Rest Api how to load data in dropdown in Vuejs?
body: <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>new Vue({
      el: '#app',
      
      data: function() {
          return {
              countries: [],
              cities: [],
              selectedContinent: "",
              selectedCountry: "",
              selectedCity: ""
          }
      },
      watch: {
          selectedContinent: function() {
              // Clear previously selected values
              this.countries = [];
              this.cities = [];
              this.selectedCountry = "";
              this.selectedCity = "";
              // Populate list of countries in the second dropdown
              if (this.selectedContinent.length &gt; 0) {
                  this.countries = this.places[this.selectedContinent]
              }
          },
          selectedCountry: function() {
              // Clear previously selected values
              this.cities = [];
              this.selectedCity = "";
              // Now we have a continent and country. Populate list of cities in the third dropdown
              if (this.selectedCountry.length &gt; 0) {
                  this.cities = this.places[this.selectedContinent][this.selectedCountry]
              }
          }
      }
  })</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.dropdown {
      margin: 10px 0;
      padding: 10px 0;
      border-bottom: 1px solid #DDD;
  }
  
  .dropdown span {
      display:inline-block;
      width: 80px;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;body&gt;
      &lt;div id="app"&gt;
         &lt;div class="cascading-dropdown"&gt;
              &lt;div class="dropdown"&gt;
                  &lt;span&gt;Continent:&lt;/span&gt;
                  &lt;select v-model="selectedContinent"&gt;
                      &lt;option value=""&gt;Select a Continent&lt;/option&gt;
                      &lt;option v-for="(country_obj, country) in places" :value="country"&gt;{{country}}&lt;/option&gt;
                  &lt;/select&gt;
              &lt;/div&gt;
              &lt;div class="dropdown"&gt;
                  &lt;span&gt;Country:&lt;/span&gt;
                  &lt;select :disabled="countries.length == 0" v-model="selectedCountry"&gt;
                      &lt;option value=""&gt;Select a Country&lt;/option&gt;
                      &lt;option v-for="(city_obj, city) in countries"&gt;{{city}}&lt;/option&gt;
                  &lt;/select&gt;
              &lt;/div&gt;
              &lt;div class="dropdown"&gt; 
                  &lt;span&gt;City:&lt;/span&gt;
                  &lt;select :disabled="cities.length == 0" v-model="selectedCity"&gt;
                      &lt;option value=""&gt;Select a City&lt;/option&gt;
                      &lt;option v-for="city in cities"&gt;{{city}}&lt;/option&gt;
                  &lt;/select&gt;
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt; 
  &lt;/body&gt; </code></pre>
  </div>
  </div>
  </p>
  <p>Below is the REST API for countries, states and cities
  <a href="https://www.universal-tutorial.com/rest-apis/free-rest-api-for-country-state-city" rel="nofollow noreferrer">https://www.universal-tutorial.com/rest-apis/free-rest-api-for-country-state-city</a>
  and I have generated a token.
  Generated Token : IIPwMXygilaKrQJfNLuj-LHZWn5kxBVZRLJ-KtU5jxRivdTBkHio6IOyF60CERyOPjo</p>
  <p>Working codesandbox link:-
  <a href="https://jsfiddle.net/Dhanunjay/sj24kn0b/6/" rel="nofollow noreferrer">https://jsfiddle.net/Dhanunjay/sj24kn0b/6/</a></p>
  <p>With the list of items in data, i am able to load data in dropdown. But i am not sure how to load data using rest api in dropdown</p>
  <p>Followed this documentation for Free REST API for countries, states and cities</p>