title: Rendering Dynamic Select Options
body: <p>I have a form that is currently using jQuery to do a series of ajax requests and then dynamically change select options based on the data. I thought this would be something nice to reimplement in vue.js as a learning experience. But seem to be running into a snag with what is the best way to add dynamic options to a <code>&lt;select&gt;</code>. This link in the docs (<a href="http://012.vuejs.org/guide/forms.html#Dynamic_Select_Options" rel="noreferrer">http://012.vuejs.org/guide/forms.html#Dynamic_Select_Options</a>) looks like exactly what I need but am having issues replicating in my code below. Any ideas what I could be doing wrong? Any tips are appreciated!</p>
  
  <pre><code>&lt;script src="https://unpkg.com/vue"&gt;&lt;/script&gt;
  
  &lt;script type="text/x-template" id="add-match-template"&gt;
      &lt;select v-model="selected_game" options="games"&gt;&lt;/select&gt;
  &lt;/script&gt;
  
  &lt;div id="add_match_form"&gt;
      &lt;add-match-form&gt;&lt;/add-match-form&gt;
  &lt;/div&gt;
  
  &lt;script type="text/javascript"&gt;
      Vue.component('add-match-form', {
          template: '#add-match-template',
          data: function() {
              return {
                  games: [
                      {'value': 1, 'text': 'Game 1'},
                      {'value': 4, 'text': 'Game 4'}
                  ],
                  selected_game: null
              }
          }
      })
  
      new Vue({
          el: "#add_match_form"
      })
  &lt;/script&gt;
  </code></pre>