JSFiddle - React, Tailwind, and code Playground

by skirtle

HTML

<script src="https://unpkg.com/[email protected]/dist/vue.global.js"></script>
<div id="app">
  <div v-for="(value, key) in data.testingObj" :key="key">
    <input v-if='value.hasOwnProperty("deep")' type="text" v-model="value.deep.id">
    <input v-else type="text" @change="addNew($event.target.value)">
  </div>
</div>

JavaScript

const { createApp, reactive } = Vue

createApp({
	setup () {
		const data = reactive({
      testingObj: {
        "one": {
          "deep": {
          	"id": 1,
          	"value": 2
          }
      	},
        "two" : {}
      }
    })
    
    const addNew = (value) => { 
    	console.log('addNew called')
      data.testingObj.two.deep = {
      	"id" : 2,
      	value
    	}
  	}
    
    return {
      addNew,
      data
    }
  }
}).mount('#app')