Vue.js <select> v-model not binding within component

Question

I am trying Vue.js, everything looks great other than working with select inputs within components. I created a basic fiddle setup to illustrate the problem : https://jsfiddle.net/8f24xLdq/

    <div class="panel-body" id="vue">
  <example></example>
</div>
<script type="text/x-template" id="t">
  <div>
    <select v-bind="selected">
      <option v-for="option in options" v-bind:value="option.value">
        {{ option.text }}
      </option>
    </select>
    <span>Selected: {{ selected }}</span>
  </div>
</script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.1.10/vue.js"></script>
<script>
  Vue.component('example', {
    template: "#t",
    data: function() {
      return {
        selected: 'A',
        options: [{
          text: 'One',
          value: 'A'
        }, {
          text: 'Two',
          value: 'B'
        }, {
          text: 'Three',
          value: 'C'
        }]
      }
    }
  });

  new Vue({
    el: "#vue"
  });

</script>

Answer 1

在<select >使用v-model而不是v-bind

<select v-model="selected">

Answer 2

  <div class="col-md-6">
    <select v-model="selectedto">
      <option v-for="option in estados" v-bind:value="option.id" :key="option.id" v-html="option.label">
      </option>
    </select>
    <span v-html="selectedto"></span>
  </div>

  mounted: function () {
     console.log('created', this);
     var vm = this;
     vm.$root.selectedto = 1;
  }