Access selected text (not value) of a select element with Vue - vue.js

Question

Just trying to access the selected text (not value) of a select element via Vue:
var App = window.App = new Vue({
el: '#app',
data: {
style: '5'
},
computed: {
calctitle: function() {
return this.otype.text;
}
}
});
Just an example style object:
$item = new stdClass();
$item->value = 5;
$item->text = 'Name 1';
$style = array($item);
...
Here i try to create a binding because if i don't cannot submit the form because the option value is "[object Object]", but i need the real int value.
<p>{{calctitle}}</p>
<select v-model="style" name="style">
<option>Choose style</option>
<?php foreach ($style as $item) : ?>
<option value="<?php echo $item->value; ?>" v-bind:otype="{value: <?php echo $item->value; ?>, text: '<?php echo $item->text; ?>'}"><?php echo $item->text; ?></option>
<?php endforeach ?>
</select>

Answer 1

I don't think you'll be able to do it with a computed, since you don't store the selected option anywhere, only its value.
Instead, you can create a data item and use the change event on the select to pull the selected option and set your data value from its textContent.
new Vue({
el: '#app',
data: {
selectedText: '',
style: '5'
},
methods: {
updateFromSelectedText(event) {
const options = event.target.options;
const selectedOption = options[options.selectedIndex];
this.selectedText = selectedOption.textContent;
}
}
});
<script src="//cdnjs.cloudflare.com/ajax/libs/vue/2.3.3/vue.min.js"></script>
<div id="app">
<p>{{selectedText}} and {{style}}</p>
<select v-model="style" name="style" #change="updateFromSelectedText">
<option>Choose style</option>
<option value="1">One</option>
<option value="2">Two</option>
<!--option value="<?php echo $item->value; ?>" v-bind:otype="{value: <?php echo $item->value; ?>, text: '<?php echo $item->text; ?>'}"><?php echo $item->text; ?></option-->
</select></div>