JSFiddle - React, Tailwind, and code Playground
HTML
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<div id="app">
<p>{{ message }}</p>
<myselect v-bind:option= "option" ></myselect>
{{option}}
</div>
JavaScript
Vue.component('myselect', {
props: ['option'],
template: '<div class="form-group">' +
'<label for="exampleInputPassword1" class="control-label col-sm-3">Child</label>' +
'<div class="col-sm-9">' +
'<select class="form-control" v-model="option.value">' +
'<option value="0">Under 1</option>' +
'<option value="1">1</option>' +
'<option value="2">2</option> ' +
'<option value="3">3</option>' +
'<option value="4">4</option>' +
'<option value="5">5</option>' +
'<option value="6">6</option>' +
'<option value="7">7</option>' +
'<option value="8">8</option>' +
'<option value="9">9</option>' +
'<option value="10">10</option>' +
'<option value="11">11</option>' +
'<option value="12">12</option>' +
'<option value="13">13</option>' +
'<option value="14">14</option>' +
'<option value="15">15</option>' +
'<option value="16">16</option>' +
'<option value="17">17</option>' +
'</select>' +
'</div>' +
'</div>'
})
new Vue({
el: '#app',
data: {
message: 'Hello Vue.js!',
option : {value : 2}
}
})