Dropdown functions not worked after refresh page in Vue js 2

[mrzslr]

hi there. I try to use Semantic UI search dropdown in my own project that I wrote by VueJS 2.
for the first time, I open the create route and everything is ok and the functions are written in mounted function in worked.
but when I refresh the page functions are not works and dropdown default text are disappeared or lost the style.
where is the mistake or problem? any idea?

create.vue - mounted function

mounted(){
$('.ui.search.dropdown')
	.dropdown({
	allowCategorySelection: true
   });
}

template code

<div class="field">
	<select class="ui search dropdown" v-model="form.category">
	     <option value="">Category</option>
	     <option v-for="category in categories" v-bind:value="category.id">{{category.title}}</option>
	</select>
</div>

[vinayakkulkarni]

Vue.component('dropdown', {
  template: `<div class="ui selection dropdown">
  <input type="hidden" :value="value" @change="updateDropdown">
  <i class="dropdown icon"></i>
  <div class="default text">{{defaultText}}</div>
  <div class="menu">
    <div v-for="item in items" class="item" :data-value="item.id">{{ item.name }}</div>
  </div>
</div>`,
  props: ['items', 'value', 'defaultText'],
  watch: {
    value: function (val, oldVal) {
      if(val == null) {
        $(this.$el).dropdown('clear');
      }
    },
    items: function (val, oldVal) {
      $(this.$el).dropdown('refresh');
    }
  },
  mounted() {
    $(this.$el).dropdown();
  },
  methods: {
    updateDropdown() {
      let id_value = $(this.$el).find('input').val();
      id_value = (id_value === "" || id_value === null) ? '' : id_value;
      this.$emit('input', id_value);
      this.$emit('valuechanged');
    }
  }
});

Assuming your item object has id and name

also, for any usage related questions, ping us on: Gitter Channel or Semantic-UI Discord server