import { Component } from './vues6.js'

const template = `
<div>
	<h1>{{ message }} (Changes: {{ changes }})</h1>
	<h2>{{ tagline }}</h2>
	<button type="button" @click="onClick">Click Me!</button>
	<input type="text" v-model="message">
</div>
`

export default class HelloWorldComponent {
	static get selector() { return 'hello-world' }
	static get props() { return ['tagline'] }
	static get template() { return template }

	message = 'Hello World'
	changes = 0

	onClick() {
		this.message += '!'
	}

	watch_message(nv, ov) {
		this.changes += 1
	}
}