title: Vue + Laravel + Amchart: Selected value does not zoom to the selected country on the map
body: <p>I use Laravel where I have an Amcharts' map in vue and there is a html select too with countries' name. How can solve that if I select a country then it zoom to the country on the map AND if I click to a country on the map the selected name appear on the html select too?
  I could solve this with jquery (without vue) with added these lines:</p>
  
  <pre><code>$('#select').on('change', function() {
  
      var id = this.value;
  
      if ( '' == id ) {
          map.clickMapObject(map.dataProvider);
      }
      else {
          map.clickMapObject(map.getObjectById(id));
      }
  });
  
  map.addListener("clickMapObject", function (event) {
      document.getElementById("select").value = event.mapObject.id;
  });
  </code></pre>
  
  <p>but I would like to do it in Vue and I do not really understand how should do it.
  Here is my index.html</p>
  
  <pre><code>&lt;div id="titles"&gt;
   &lt;div class="container map"&gt;
       &lt;div class="row"&gt;
  
               &lt;div class="col-md-9" id="mapdiv" style="width: 100%; height: 500px;"&gt;&lt;/div&gt;
               &lt;div class="col-md-3"&gt;
                   &lt;div id="listed"&gt;
                       &lt;ul &gt;
                            &lt;li v-for="task in filteredCountry"&gt;
                                 @{{task.title}}         
                            &lt;/li&gt;
                       &lt;/ul&gt;
                   &lt;/div&gt;
                   &lt;select class="form-control" id="select" name="select" v-model="selectedCountry"&gt;
                       &lt;option value=""&gt;Select a country&lt;/option&gt;
                       &lt;option  value="All" &gt;All&lt;/option&gt;
                       &lt;option value="AF"&gt;Afghanistan&lt;/option&gt;
                       &lt;option value="AX"&gt;Åland Islands&lt;/option&gt;
                           &lt;!-- More countries --&gt;
                    &lt;/select&gt;
              &lt;/div&gt;
           &lt;/div&gt;
       &lt;/div&gt;
    &lt;/div&gt;
  </code></pre>
  
  <p>Vue:</p>
  
  <pre><code>$( document ).ready(function() { 
  
   const app = new Vue({
        el: '#titles',
        data: {
             tasks: {!! $tasks !!},
             selectedCountry: "All",
        },
        created() {
             AmCharts.makeChart( "mapdiv", {
                 "type": "map",
                 "zoomDuration": 0.1,
                 "colorSteps": 100,
  
                 "dataProvider": {
                     "map": "worldHigh", 
                     "getAreasFromMap": true,
                     "areas": &lt;?php echo  '' . $countCountries . '' ?&gt;
                 },
  
                 "areasSettings": {
                     "autoZoom": true,
                     "colorSolid": "#1B144B",
                     "selectedColor": "#1B144B",
                     "color": "#4DC5AC",
                 },
  
                 "valueLegend": {
                     "right": 100,
                     "minValue": "some",
                     "maxValue": "a lot!"
                 }, 
  
             });
        },
        computed: {
             filteredCountry: function() {
                  var app = this;
                  var countries = app.selectedCountry;
  
                  if(countries === "All") {
                       return app.tasks;
                  } else {
                       return app.tasks.filter(function(task) {
                            return  (countries === 'All' || task.countries === countries);
                       });
                  }
             }
        },
   });
  
   });
  </code></pre>