Vue.js <select> v-modelはコンポーネント内でバインディングされていません - javascript、vuejs2

私はVue.jsを試していますが、コンポーネント内の選択された入力を操作する以外はすべて見栄えがします。 問題を説明するために、基本的なフィドルセットアップを作成しました。 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>

回答：

つかいます v-model の代わりに v-bind ここに

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