title: How do I update semantic ui dropdown list with vue?
body: <p>I'm trying to update the semantic ui dropdown with new values. Vue is correctly being updated and I'm refreshing the semantic ui dropdown but it still isn't updating. I saw another post which mentioned the use of key, but it still fails. </p>
  
  <p><strong>Template</strong> </p>
  
  <pre><code>&lt;div id=root&gt;
    &lt;label&gt;Type:&lt;/label&gt;
    &lt;select id="app_type" class="ui search selection dropdown" v-model="model_type_val"&gt;
      &lt;option v-for="model_type in model_types" v-bind:value="model_type.value" v-bind:key="model_type.value"&gt;{{model_type.text}}&lt;/option&gt;
    &lt;/select&gt;
    &lt;p&gt;
      selected: {{model_type_val}}
    &lt;/p&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p><strong>Code</strong></p>
  
  <pre><code>var model_types2= [
    {value:"",text:"Type"},
    {value:"type1",text:"Type1a"},
    {value:"type2",text:"Type2a"},
    {value:"type3",text:"Type3a"},
    {value:"type4",text:"Type4"}      
  ];
  
  var vm2= new Vue({
    el:'#root',
    data:{
      model_type_val:"",
      model_types:[
        {value:"",text:"Type"},
        {value:"type1",text:"Type1"},
        {value:"type2",text:"Type2"},
        {value:"type3",text:"Type3"}
      ]
    },
    mounted: function(){
      $('#app_type').dropdown();
      setTimeout(function() {
        this.model_types=model_types2;
        alert(this.model_types[1].text);
        $('#app_type').dropdown('refresh');              
      }, 1000);
    }
  });
  </code></pre>
  
  <p>I've tried to reproduce the code in <a href="https://jsfiddle.net/tvinci/nh6tao4y/5/" rel="nofollow noreferrer">this jsfiddle</a>.</p>