Vue

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/vee-validate/2.1.1/vee-validate.min.js"></script>
<div id="app">
  <h2>Validate Select</h2>
  <form @submit.prevent="validateBeforeSubmit">
  <div>
    <input type="text" v-model="client.referral_type" name="Referral Type" v-validate="'required'" placeholder="Referral Type">
    <span class="form-error" v-show="errors.has('Referral Type')">{{ errors.first('Referral Type')}}</span>
  </div>
  <div>
    <select name="Category Type" v-validate="'required'" id="category" v-model="client.category">
    <option disabled>{{ option }}</option>
    <option v-for="(category, index) in categories" :key="index" :value="category">{{ category}}</option>
  </select>
  <span class="form-error" v-show="errors.has('Category Type')">{{ errors.first('Category Type')}}</span>
  </div>
  <div>
     <button type="submit">Submit</button>
  </div>
  </form>
  

</div>

CSS

body {
  background: #20262E;
  padding: 20px;
  font-family: Helvetica;
}

#app {
  background: #fff;
  border-radius: 4px;
  padding: 20px;
  transition: all 0.2s;
  display: flex;
  flex-direction: column;
}

li {
  margin: 8px 0;
}

div {
  margin-bottom: 20px;
}

h2 {
  font-weight: bold;
  margin-bottom: 15px;
}

del {
  color: rgba(0, 0, 0, 0.3);
}

Vue

Vue.use(VeeValidate);

new Vue({
  el: "#app",
  data: {
  	client: {
    	category: '',
      referral_type: ''
    },
    categories: [
    	'client',
      'prospect'
    ],
    option: 'Choose...'
  },
  methods: {
    validateBeforeSubmit() {
      this.$validator.validateAll().then((result) => {
        if (result) {
          this.addNewClient();
        }
      });
    },
    addNewClient() {
    	alert('Added Client!')
    }
  },
  created: function() {
    this.client.category = this.option
  }
})