Vue.js <select> v-model no vinculante dentro del componente - javascript, vuejs2

Estoy probando Vue.js, todo se ve muy bien aparte de trabajar con entradas seleccionadas dentro de los componentes. Creé una configuración básica de violín para ilustrar el problema: 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>

Respuestas

Utilizar v-model en lugar de v-bind aquí

<select v-bind="selected">

  <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;
}