JSFiddle - React, Tailwind, and code Playground

by ChangJoo Park

HTML

<div id="app">
	{{message}}
	{{point}}
	
	<button @click="increasePoint">+</button>
</div>

JavaScript

const vueApp = new Vue({
	el: '#app',
	data() {
		return {
			message: "Hello Vue.js",
			point: 0,
		};
	},
	methods: {
		increasePoint() {
			this.point++;
		},
		limitPointTen() {
			alert('point is ten!');
		},
	},
	events: {
		'hook:created': function() {
		},
		'hook:beforeCompile': function() {
		}
	}
});

vueApp.$watch('point', function(val, oldVal){
	if(oldVal === 10) {
		this.limitPointTen();
	}
});