Using something other than form field's value in Vue
This is not the Vue-way to do it. Vue does not recommend the use of $refs. And in this case, you can also avoid it.

Your current code is:

&lt;select name="screw[type]" ref="screw_type_select" v-model="form.screw.type"&gt;
   &lt;option value="My value" data-value=""&gt;&lt;/option&gt;


I would recommend using v-for to loop through your options, and keep all your options in your data.

So for example: (This is how it is done in the Vue JS official documentation)

data() {
    return {
        options: [
             {
                 text: "&lt;?php _e('My value', 'context'); ?&gt;",
                 value: "My value"
             },
             ...
        ]
    }
}


And then:

&lt;select name="screw[type]" v-model="form.screw.type"&gt;
  &lt;option v-for="option in options" v-bind:value="option.value"&gt;
    {{ option.text }}
  &lt;/option&gt;
&lt;/select&gt;


Instead of using the watch, you can use a computed property.

computed: {
    selectedScrewType() {
        return this.options[this.form.screw.type].text;
    }
}


Then you can use {{ selectedScrewType }} in your template.