Vue, how to make changes in one field affect the value in another?

Question

Vue.js

I have created a component to display a styled input field. There may be several such fields on the page tied to the same data, so when changing the value in one field, I expect the value to change in the other (this is how it would work with ordinary fields not wrapped in a component). But it doesn't and I don't understand why.
Link to the code with an example https://codepen.io/anon/pen/dqgRdg - I need fields 1 and 2 to work the same as fields 3 and 4.

Answer 1

Use a parameter as the input value, like this . You can even wrap it in a computed property with a setter - then inside the component you can use v-model.