現在index.htmlでインスタンスを作成後にイベントを設定してバインディングさせていますが、イベントもdataと同じようにインスタンス作成前に設定して更新をかけたいです。
(ViewModelのthisの参照先が違うため変更の監視ができません)
どのように変更すれば出来るようになるかご回答よろしくおねがいします。

index.html「onClick」の変更イメージ

javascript
1//index.html変更イメージ
2 let ViewModel = function () {
3        let self = this;
4        self.el = "#app",
5            self.data = {
6                message: 0,
7                hidden:true,
8                onClick:() => {
9                    self.data.message += 1;
10                }
11            }
12    };
13
14    let viewModel = new ViewModel();
15    let View = new Thin(viewModel);

全コード

javascript
1//thinframe.js
2
3import { attribute,events } from './data_judgment.js';
4
5export class Thin {
6    constructor(options) {
7        this.data = this.reactive(options.data);
8        this.target = document.querySelector(options.el);
9        this.tbind = this.target.querySelectorAll("[data-tbind]");
10
11        this._init_views();
12
13        return this;
14    }
15
16    reactive(target_r){
17        const self = this;
18        let handler = {
19            set(target, prop, value, receiver) {
20                target[prop] = value;
21                self._change(prop, target[prop]);
22                return true;
23            },
24            get(target, prop, receiver) {
25                return target[prop];
26            },
27            deleteProperty(target, prop) {
28                delete target[prop];
29            }
30        };
31        return new Proxy(target_r, handler);
32    }
33
34
35    _change(prop, value) {
36        let obj = {
37            [prop]:value
38        };
39        for (var i = 0; i < this.tbind.length; i++) {
40            attribute(this.tbind[i], obj);
41        }
42    }
43
44
45    _init_views() {
46        for (var i = 0; i < this.tbind.length; i++) {
47            attribute(this.tbind[i], this.data);
48        }
49    }
50
51    event_regist(obj){
52        for (var i = 0; i < this.tbind.length; i++) {
53            events(this.tbind[i], obj);
54        }
55    }
56}

javascript
1//data_judgment.js
2export let attribute = (prop, value) => {
3    let name = prop.dataset.tbind.split(",");
4    for (let i = 0; i < name.length; i++) {
5        let n1 = name[i].substring(0, name[i].indexOf(":")).trim();
6        let n2 = name[i].replace(n1 + ":", "").trim();
7        switch (n1) {
8            case 'text':
9                _thText(prop,value,n2);
10            break;
11            case 'if':
12                _thIf(prop,value,n2);
13            break;
14        }
15    }
16}
17
18export let events  = (prop, value) => {
19    let name = prop.dataset.tbind.split(",");
20    for (let i = 0; i < name.length; i++) {
21        let n1 = name[i].substring(0, name[i].indexOf(":")).trim();
22        let n2 = name[i].replace(n1 + ":", "").trim();
23        switch (n1) {
24            case 'click':
25                _thClick(prop,value,n2);
26            break;
27        }
28    }
29}
30
31
32
33
34let _thText = (prop, value,name) => {
35    for (const property in value) {
36        if (property === name) {
37            prop.textContent = value[property];
38        }
39    }
40}
41
42let _thIf = (prop, value,name) => {
43    for (const property in value) {
44        if (property === name) {
45            value[property] ? prop.style.display = "block" : prop.style.display = "none";
46        }
47    }
48}
49
50let _thClick = (prop, value,name) => {
51    for (const property in value) {
52        if (property === name) {
53            prop.addEventListener('click',() =>{
54                value[property]();
55            });
56        }
57    }
58}

html
1<!DOCTYPE html>
2<html lang="ja">
3<head>
4    <meta charset="UTF-8">
5    <meta http-equiv="X-UA-Compatible" content="IE=edge">
6    <meta name="viewport" content="width=device-width, initial-scale=1.0">
7    <title>Document</title>
8</head>
9
10<body>
11    <div id="app">
12        <div data-tbind="text:message,if:hidden"></div>
13       <button data-tbind="click:onClick">1増やします</button>
14       <button data-tbind="click:onDown">1減らします</button>
15       <button data-tbind="click:onHidden">表示 非表示切り替え</button>
16    </div>
17</body>
18
19<script type="module" src="thinframe.js"></script>
20<script type="module">
21    import { Thin } from './thinframe.js';
22    let ViewModel = function () {
23        let self = this;
24        self.el = "#app",
25            self.data = {
26                message: 0,
27                hidden:true
28            }
29    };
30
31    let viewModel = new ViewModel();
32    let View = new Thin(viewModel);
33
34
35    View.events ={
36        onClick:() => {
37            View.data.message += 1;
38        },
39        onDown:() =>{
40            View.data.message -= 1;
41        },
42        onHidden:() =>{
43            View.data.hidden ? View.data.hidden = false : View.data.hidden = true;
44        }
45    }
46    View.event_regist(View.events);
47
48</script>
49
50</html>