JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.9/vue.min.js"></script>
<div id="app">
  <input v-for="input in inputs" v-model="input.value" type="text">
</div>

CSS

#app {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

JavaScript

new Vue({
	el: '#app',
  data() {
  	return {
    	inputs: [
      	{ id: 1, value: 'input-1' },
        { id: 2, value: 'input-2' },
        { id: 3, value: 'input-3' },
        { id: 4, value: 'input-4' }
      ],
    };
  },
  computed: {
  	firstInputValue() {
    	return this.inputs[0].value;
    }
  },
  watch: {
  	firstInputValue(value) {
    	this.inputs.slice(1).forEach((input) => {
      	input.value = `${value}-${input.id}`;
      });
    }
  }
});