title: How to make a validation and show message if default value is selected in dropdown in vue
body: <p>I have a dropdown that I want to give a validation.</p>
  <p>So here is my dropdown component:</p>
  <pre><code>&lt;template&gt;
      &lt;div class=&quot;custom-select&quot; :tabindex=&quot;tabindex&quot; @blur=&quot;open = false&quot;&gt;
          &lt;div class=&quot;selected&quot; :class=&quot;{ open: open }&quot; @click=&quot;open = !open&quot;&gt;
              {{ selected.name }}
          &lt;/div&gt;
          &lt;div class=&quot;items&quot; :class=&quot;{ selectHide: !open }&quot;&gt;
              &lt;div v-if=&quot;defaultValue != ''&quot;&gt;{{defaultValue}}&lt;/div&gt;
              &lt;div v-for=&quot;(option, i) of options&quot; :key=&quot;i&quot; @click=&quot; selected = option; open = false; $emit('input', option);&quot;&gt;
                  {{ option.name }}
              &lt;/div&gt;
          &lt;/div&gt;
  
      &lt;/div&gt;
  &lt;/template&gt;
  
  &lt;script&gt;
  export default {
      props: {
          options: {
              type: Array,
              required: true,
          },
          defaultValue: {
              type: String,
              required: false,
              default: &quot;Choose an option&quot;,
          },
          tabindex: {
              type: Number,
              required: false,
              default: 0,
          },
      },
      data() {
          return {
              open: false,
              selected: this.setDefaultValue(),
          };
      },
      mounted() {
          this.$emit(&quot;input&quot;, this.selected);
      },
      methods: {
          setDefaultValue () {
              if (this.defaultValue == '' &amp;&amp; this.options.length &gt; 0) {
                  return this.options[0];
              }
              return { name: this.defaultValue};
          }
      }
  };
  &lt;/script&gt;
  </code></pre>
  <p>and in my parent component, I am using this dropdown, the fetched value from API call and filled with variations. So what I am trying to do is if the value is not selected (default: &quot;Choose an option&quot;), I want to give an error message which is saying, the dropdown is mandatory.</p>
  <pre><code>&lt;Dropdown
                              :options=&quot;getVariations&quot;
                              class=&quot;select&quot;
                              @input=&quot;getSelected&quot;
                          /&gt;
  
  &lt;script&gt;
  
  import Dropdown from &quot;../components/Dropdown&quot;;
  import apiHelper from &quot;../helpers/apiHelper&quot;;
  
  export default {
      components: {Dropdown},
      data() {
          return {
              selected: &quot;&quot;,
              variationId: &quot;&quot;,
              selectedObject: null
          };
      },
      computed: {
          getVariations() {
              return this.product.attributes.variations
          }
      },
      methods: {
          getSelected(opt) {
              this.selectedObject = opt;
              this.selected = opt.description;
              this.variationId = opt.id;
          }
      },
  };
  &lt;/script&gt;
  </code></pre>