JSFiddle - React, Tailwind, and code Playground
HTML
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.min.js"></script>
<div id="app">
<p>{{ obj }}</p>
<p v-for="(val, key) in obj">
<input :value="obj[key]" :name="key" @input="onInput">
</p>
</div>
JavaScript
new Vue({
el: '#app',
data: {
json: '{"name":"Vasya","surname":"Pupkin","гражданство": "РФ"}',
},
computed: {
obj() {
return JSON.parse(this.json);
},
},
methods: {
onInput(e) {
const { name, value } = e.target;
this.json = JSON.stringify(Object.assign({}, this.obj, { [name]: value }));
},
},
});