title: Custom Select Component on Vue with SVG
body: <p>I'm creating a custom select component on Vue and I'm using tailwind to style it.</p>
  
  <p>I would like to have an chevron-down caret svg align to the right, which will open the select options when clicked. I'm having some trouble with this.</p>
  
  <pre><code>&lt;template&gt;
    &lt;div class="flex flex-wrap mb-4 relative"&gt;
  
      &lt;select :value="value" @input="$emit('input', $event.target.value)" class="w-full h-12 pl-4 bg-white focus:bg-grey-10 focus:text-grey-5 border-2 border-grey-9 rounded-lg text-sm focus:outline-none"&gt;
          &lt;option :value="null"&gt;
            Select an option
          &lt;/option&gt;
          &lt;option v-for="option in options" :value="option.slug"&gt;{{ option.name }}&lt;/option&gt;
      &lt;/select&gt;
  
      &lt;svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20" class="absolute mt-4 mr-4 right-0 cursor-pointer"&gt;
        &lt;path d="M9.293 12.95l.707.707L15.657 8l-1.414-1.414L10 10.828 5.757 6.586 4.343 8z"/&gt;
      &lt;/svg&gt;
  
  
    &lt;/div&gt;
  &lt;/template&gt;
  
  &lt;script&gt;
    export default {
      props: [ 'value'],
      data () {
          return {
              options: [
                  { slug: 'test1', name: 'Test 1' },
                  { slug: 'test2', name: 'Test 2' },
              ],
          };
      },
    }
  &lt;/script&gt;
  </code></pre>
  
  <p>This is what it looks like, however the svg when clicked does not open the dropdown. </p>
  
  <p><a href="https://i.stack.imgur.com/IZTsN.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/IZTsN.png" alt="Select image"></a></p>
  
  <p>Any suggestions?</p>