vee-validate example

HTML

<script src="https://unpkg.com/vee-validate@2.0.0-beta.25"></script>

<div id="app">
  <form class="ui form" @submit.prevent="onSubmit">
    <div class="field" :class="{error: errors.has('Category Type')}">
      <select id="category" v-model="client.category" name="Category Type" v-validate="'required'">
        <option disabled>{{option}}</option>
        <option v-for="category in categories" :key="category.id" :value="category">{{ category }}</option>
      </select>
      <span v-show="errors.has('Category Type')">{{ errors.first('Category Type') }}</span>
    </div>
    <button type="submit" class="ui submit button">Submit</button>
  </form>
</div>

CSS

@import url('https://unpkg.com/semantic-ui-css@2.2.9/semantic.css');
span.error {
  color: #9F3A38;
}

JavaScript

Vue.use(VeeValidate)

new Vue({
  el: '#app',
  data() {
    return {
      client: {
        category: undefined
      },
      categories: ['Fruits', 'Shoes', 'Toys']
    }
  },
  methods: {
    onSubmit() {
      this.$validator.validateAll()

      if (!this.errors.any()) {
        alert('submit')
      }
    }
  }
})