JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.0.3/vue.js"></script>
<body>
  <div id="app"></div>
</body>

JavaScript

new Vue({
    el: '#app',
    template: `
        <div class="my-text-input-fields">
            <div class="text-input" v-for="textField in textFields">
                <input type="text" v-model="textField.value">
            </div>
            <div style="margin-top:30px;">
                {{textValues}}
            </div>
        </div>
    `,
    data: function() {
        return {
            textFields: [
                {id: 1, value: ""},
                {id: 2, value: ""},
                {id: 3, value: ""}
            ]
        }
    },
    computed: {
        textValues: function() {
            values = []
            this.textFields.forEach(textField => {
                values.push(textField.value);
            })
            return values;
        }
    }
})