JSFiddle - React, Tailwind, and code Playground

by skirtle

HTML

<script src="https://unpkg.com/[email protected]/dist/vue.global.js"></script>
<div id="app">
  {{ obj.name }} {{ obj.age }} {{ obj.location }}
</div>

JavaScript

const { createApp, ref } = Vue

const obj = {
  name: 'Abc',
  age: 12,
  location: 'Here'
}

const FLAG = '__fake_observable__'

const makeObservable = obj => {
  if (!obj || typeof obj !== 'object' || Array.isArray(obj) || obj[FLAG]) {
    return obj
  }
    
  Object.defineProperty(obj, FLAG, { value: true })
  
  for (const prop in obj) {
    const value = obj[prop]
    
    makeObservable(value)
    
    const propRef = ref(value)
    
    Object.defineProperty(obj, prop, {
      configurable: true,
      enumerable: true,
      
      get () {
        return propRef.value
      },
      
      set (value) {
        makeObservable(value)
        propRef.value = value
      }
    })
  }
  
  return obj
}

makeObservable(obj)

Vue.createApp({
  setup () {
    return { obj }
  }
}).mount('#app')

setInterval(() => {
  obj.age++
}, 1000)