Vue.js + ES6

index.html

<div id="demo">
    <h1>{{bob.fields.firstName}} {{bob.fields.lastName}}</h1>
</div>

<ul id="humans-list">
    <li v-repeat="humans">
        {{fields.firstName}} {{fields.lastName}}
    </li>
</ul>

main.js

class Human  {
  constructor (arg={firstName:"John", lastName:"Doe"}) {
    this.fields = arg;
  }
  
  get (fieldName) {
    return this.fields[fieldName];
  }

  set (fieldName, value) {
    this.fields[fieldName] = value;
    return this;
  }
}

class Demo extends Vue {
  constructor () {
    var properties = {
      el: '#demo',
      data: {
        bob: new Human({firstName:"Bob", lastName:"Morane"})
      }
    };
    super(properties)
  }
}

class HumansList extends Vue {
  constructor (collection) {
    this.collection = collection;
    super({
      el: "#humans-list", data: collection
    })
  }
}

let demo = new Demo()

let humansList = new HumansList({
  humans:[
    new Human(),
    new Human({firstName:"Jane", lastName:"Doe"})
  ]
});