title: Select Options are not working Vue js
body: <p>While, practising over different elements using <code>Vue</code>, I got stuck at this point. When i tried to make an <code>option</code> <code>template</code> component and tried to use it in <code>select</code>, it's not working.</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-js lang-js prettyprint-override"><code>Vue.component('todo-item', {
    
    props: ['todo'],
    template: '&lt;option v-bind:value="todo.id"&gt;{{todo.text}}&lt;/option&gt;'
  })
  
  var app = new Vue({
    el: '#app',
   todo : [],
    data: {
      message: 'Hello Vue!123',
      buttonText: 'Click Me',
      seen:true,
      groceryList: [
        { id: 0, text: 'Vegetables' },
        { id: 1, text: 'Cheese' },
        { id: 2, text: 'Whatever else humans are supposed to eat' }
      ]
    },
    methods:{
      buttonClick:() =&gt; {
        app.message="Button Clicked";
        app.seen=true;
      }
    }
  })</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>table{
    width:50%;
    border: solid 2px;
  }
  td{
    border: solid 1px;
    text-align:center
  }
  ol{
      list-style-type : none;
  }
  select{
    width:30%
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"&gt;&lt;/script&gt;
  &lt;div id ="app"&gt;
    &lt;p v-if="seen"&gt;{{message}}&lt;/p&gt;
    &lt;button v-on:click="buttonClick"&gt;
      {{buttonText}}
    &lt;/button&gt;
    &lt;br&gt;&lt;br&gt;
    &lt;input v-model="message"&gt;&lt;/input&gt;
    &lt;br&gt;
    &lt;br&gt;
  &lt;select&gt;
     &lt;todo-item v-for="grocery in groceryList" :todo="grocery"&gt;
  &lt;/select&gt;
    &lt;todo-item v-for="grocery in groceryList" :todo="grocery"&gt;
      
  &lt;/todo-item&gt;
  
      &lt;ul v-for="grocery in groceryList"&gt;
      &lt;li&gt;
        {{ grocery.text }}
      &lt;/li&gt;
  &lt;/ul&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>I tried to it outside the <code>select</code> tag  and also any other <code>html</code> working fine like <code>input</code>. </p>
  
  <p><a href="https://codepen.io/anon/pen/Owwwvd" rel="nofollow noreferrer">Codepen Link</a></p>
  
  <p>Let me know in the comment section if anything you want me to do to explain my problem. Thanks</p>