Использование v-модели для отображения mutli - выберите значения

Question

Я выбираю данные из базы данных, чтобы заполнить опции в select, и мне нужна v-модель для отображения выпадающих значений mutli-select, которые я не могу заставить ее работать сейчас. Мне нужно, чтобы выбранное значение отображалось в {{country}}, Ниже мой код. Что я делаю неправильно???

 <?php require '../db.php';  
function showMultiSelect($id) 
    { 
        $sql = "SELECT DISTINCT $id FROM courses"; 
        $result = mysql_query ($sql ); 
                echo "<label>".ucfirst($id)."</label>"; 
                echo "<select class=\"select2-multiple\" name=\"".$id."[]\" id=\"".$id."\" multiple=\"multiple\"  v-model=\"".$id."\" >";                       
                    echo "<option value=''>Select</option>"; 
                while ($row = mysql_fetch_array($result)) { 
                    echo "<option value='" . $row[$id] ."'>" . $row[$id] ."   </option>"; 
                    } 
                echo "</select>"; 
                } 
    ?> 


 <div id="app"> 
                <pre>{{country}}</pre> 
                  <fieldset class="course-filter"> 

    <legend>Filter Options <small>(All filter fields are optional)</small> 
</legend> 

    <div> 

       <?php echo showMultiSelect('country'); ?> 
    </div> 

</fieldset>  

<br/> 

<script> 
$(document).ready(function() { 

  $('.select2-multiple').select2({ 
    placeholder: 'Select option(s)' 
   }); 
  }); 

 var app = new Vue({ 
   el: '#app', 
   data: { 
 courses: "", 
 country: [] 
}, 
methods: { 
 allRecords: function(){ 
  axios.get('getJSON.php') 
       .then(function (result) { 
              app.courses = result.data; 
            }) 
       .catch(function (error) { 
             console.log(error); 
          }); 
   }, 
      applyFilters: function(){ 
  var self = this; 
   if (this.country != null){ 

    axios.post('getJSON.php', { 
       params: { 
        country: self.country 
     } 
  }) 
    .then(function (result) { 
      app.courses = result.data; 
   }) 
  .catch(function (error) { 
      console.log(error); 
    }); 
 } 
}, 
   resetFilters: function(){ 
     $("select#country").val([]).trigger('change'); 
     this.allRecords(); 
     } 
 }, 
   created: function(){ 
         this.allRecords(); 
     } 
   }) 

</script>