Using something other than form field's value in Vue I have a form, I need to send untraslated values, but as well, I need to get translated ones from Vue to write them down in page.

For now, I ended up creating a 'shadow' property and changing it via the watch function. Note that I'm referencing the SELECT via the custom ref prop and Vue.$refs. So:

&lt;select name="screw[type]" ref="screw_type_select" v-model="form.screw.type"&gt;
   &lt;option value="My value" data-value="&lt;?php _e('My value', 'context'); ?&gt;"&gt;&lt;?php _e('My value', 'context'); ?&gt;&lt;/option&gt;
   //[...]


Then in Vue:

var vueapp = new Vue({
  el: '#form'
  ,data:{
    form:{
      ,screw:{
        type: "Svasata Piana"
        ,type_t: "Svasata Piana"
      }
    }
  }// data
  ,watch:{
    'form.screw.type':function(){
      var select = this.$refs.screw_type_select;
      this.form.screw.type_t = select.options[select.selectedIndex].getAttribute('data-value')
    }
  }
});


Then again in html:

{{ form.screw.type_t }} // instead of {{ form.screw.type }}


So the form will send value, but the user will see data-value intead (which is translated).

What do you think of this way?
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.