title: Vue Vee-validate select (dropdown list)
body: <p>So I am using this input template I got from a tutorial @logaretm created, which works great for just about anything I need.  I would like to know if there is a way to modify this template to validate as a Select (drop-down) and how would I populate the option values?</p>
  <p>I looked at vee-validation documentation but haven't been able to figure this out on my own.  Any help would with this is greatly appreciated.</p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;template&gt;
    &lt;div
      class="TextInput"
      :class="{ 'has-error': !!errorMessage, success: meta.valid }"
    &gt;
      &lt;label :for="name"&gt;{{ label }}&lt;/label&gt;
      &lt;input
        :name="name"
        :id="name"
        :type="type"
        :value="inputValue"
        :placeholder="placeholder"
        @input="handleChange"
        @blur="handleBlur"
      /&gt;
  
      &lt;p class="help-message" v-show="errorMessage || meta.valid"&gt;
        {{ errorMessage || successMessage }}
      &lt;/p&gt;
    &lt;/div&gt;
  &lt;/template&gt;
  
  &lt;script&gt;
  import { toRef } from "vue";
  import { useField } from "vee-validate";
  
  export default {
    props: {
      type: {
        type: String,
        default: "text",
      },
      value: {
        type: String,
        default: "",
      },
      name: {
        type: String,
        required: true,
      },
      label: {
        type: String,
        required: true,
      },
      successMessage: {
        type: String,
        default: "",
      },
      placeholder: {
        type: String,
        default: "",
      },
    },
    setup(props) {
      // use `toRef` to create reactive references to `name` prop which is passed to `useField`
      // this is important because vee-validte needs to know if the field name changes
      // https://vee-validate.logaretm.com/v4/guide/composition-api/caveats
      const name = toRef(props, "name");
  
      // we don't provide any rules here because we are using form-level validation
      // https://vee-validate.logaretm.com/v4/guide/validation#form-level-validation
      const {
        value: inputValue,
        errorMessage,
        handleBlur,
        handleChange,
        meta,
      } = useField(name, undefined, {
        initialValue: props.value,
      });
  
      return {
        handleChange,
        handleBlur,
        errorMessage,
        inputValue,
        meta,
      };
    },
  };
  &lt;/script&gt;</code></pre>
  </div>
  </div>
  </p>