updating dropdown

HTML

<script src="https://vuejs.org/js/vue.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.2.10/semantic.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.2.10/semantic.min.css">
<div id=root>
<label>Type:</label>
<select ref="app_type" class="ui search selection dropdown" v-model="model_type_val">
<option v-for="model_type in model_types" v-bind:value="model_type.value" v-bind:key="model_type.value">{{model_type.text}}</option>
</select>
<p>
selected: {{model_type_val}}
</p>
</div>

JavaScript

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(){
  	$(this.$refs.app_type).dropdown();
 		setTimeout(() => {
        			this.model_types=model_types2;
              alert(this.model_types[1].text);
              $(this.$refs.app_type).dropdown('refresh');              
 		}, 1000);
  }
});