console.clear();
var model = {
  el: '#app',
  data: {
    myName: '',
  },
};

var data = model.data;
var app = document.querySelector(model.el);
var VModel = app.querySelectorAll('[v-model]');

var p = new Proxy(data, {
  get(target, prop, receiver) {
    return target[prop];
  },
  set(target, prop, val) {
    var elementKeys = app.querySelectorAll(`[v-model=${prop}]`);
    elementKeys.forEach((item) => {
      item.value = val; // 針對 input 發生變化時也寫
      item.innerText = val; // 渲染到畫面上
    })
    target[prop] = val;
  }
});

VModel.forEach((element) => {
  element.addEventListener('input', function() {
    p[this.getAttribute('v-model')] = this.value;
  })
});

setTimeout(() => {
  console.log(p.myName);
}, 5000)