Organizing events

app.js

const Vue = require('../../node_modules/vue/dist/vue.common.js');

const App = new Vue({
	delimiters: ['${', '}'],

	el: '#app',

	data:  {
		message: 'Default message',

		greetings: {
			hi: function() {
				return 'hi';
			},

			hello: function() {
				return 'hello';
			}
		}
	},

	methods: {
		say: function(option) {

			this.message = this.greetings[option]();
		}
	}
});

index.html

<main id="app" class="home">

	<a @click.prevent="say('hi')" href="#">Click me - Hi!</a>
	<br>
	<a @click.prevent="say('hello')" href="#">Click me - Hello!</a>

	<h1>${ message }</h1>
</main>