JSFiddle - React, Tailwind, and code Playground

HTML

<main id="app">
  <div v-for="val, key in data">
    <b>{{key}}</b>
    <template v-if="Array.isArray(val)">
      <div v-for="item in val">
        <div v-for="val, key in item">
          <b>{{key}}</b>
          <input type="text" :value="val.value || val.type"/>
        </div>
      </div>
    </template>
    <template v-else>{{val.value || val.type}}</template>
  </div>
</main>

CSS

div{
  padding:5px;
  background:white;
  border-bottom:1px solid #ccc;
}

JavaScript

let data = JSON.parse(`{"user_data" : {
    	"type": "view",
    	"Name":{ 
    		"value":"Paddy M"
    	},"Email" : {
    		"value":"[email protected]"
    	}, "Phone": {
    		"type": "1234567890"
    	}, "Marital Status":{ 
    		"type":"Single"
    	}, "Address Details" : [{
    		"Residing since":{ 
    			"value":"2012-12-1"
    		}, "Residence Type":{ 
    			 "value":"Apartment"
    		}, "Residence address":{ 
    			"type":"local address"
    		}, "Residing City":{ 
    			"type":"Mumbai"
    		},
        "How stupid is your Boss?": {
        "value": "only little"
        }
    	}]
    }}`).user_data

new Vue({
	el:'#app',
  data(){
  	return {
    	data:data
    }
  }
})