По реактивности, на понимание
 

1) Вот в таком примере для Vue

<div id="app">
  <ol>
	<li v-for="(obj, key) in arr1">
		{{key}} - {{obj.prop1}} 
		{{obj.prop1 == +obj.prop1 ? 'число' : 'не число'}}
		<a href="#" v-on:click="doubleValue(obj)">double</a>
	</li>
  </ol>
</div>

var app = new Vue({
  el: '#app',
  data: {
	arr1: [
		{prop1:'01234'},
		{prop1:'56789'},
		{prop1:'qwert'},
		{prop1:'yuiop'},
	]
  },
  methods: {
	doubleValue: function(obj) {
		obj.prop1 = obj.prop1 + obj.prop1;
	}
  }
});

Как они достигают того что obj тут:
v-on:click="doubleValue(obj)"
указывает на нужный объект?
Это они каждый раз при регенерации списка v-for для каждого элемента на лету создают код обработчика для onclick и в нем
генерируют код типа?:

let obj = app.arr1[нужный индекс];
app.doubleValue(obj);

2) В принципе понятно как html реагирует на изменения в данных, т.к. последние через сеттеры производятся.
Но чисто механизм уточнить:
- при рендеринге шаблона оно смотрит на какие данные есть ссылки
- и вот на эти данные(во внутренних массивах) им запоминаются места которые на них ссылаются?
- при изменении данных, эти места и перерисовываются
- вот где бы например этот - {{obj.prop1 == +obj.prop1 ? 'число' : 'не число'}} - код бы оказался?

это гадание на кофейной гуще, надо смотреть babel-plugin для vue, как он парсит AST :)