computed function in vuejs dose not work with me - vuejs2

Question

I'm new with vue.js and have a problem,
I have a computed function that alerts a Word reversed,
I made this function working on clicking a button but it works on page loading so what is the problem.
this is the vue.js code,
new Vue({
el: '#computed',
data: {
word: 'welcome',
},
computed: {
alertRev: function() {
// get the word reversed
alert (this.word.split('').reverse().join(''));
},
}});
And this is HTML code:
<div id="computed">
<button #click="alertRev">reverse the word</button>
</div>
And this is jsFiddle link Link to code

Answer 1

As #BertEvans indicated, a method will achieve what you want to do.
My understanding is that a computed property would typically return a result from a function, as opposed to performing an action, such as an alert. Shamelessly modified example from Vuejs docs (https://v2.vuejs.org/v2/guide/computed.html):
new Vue({
el: '#computed',
data: {
word: 'welcome',
},
computed: {
reversedMessage: function() {
// get the word reversed, no alert
return this.word.split('').reverse().join('');
},
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.2.6/vue.min.js"></script>
<div id="computed" style="font-family: arial;">
Type the word: <input type="text" v-model="word">
<br />
<br /> Reversed: {{ reversedMessage }}
</div>
The method example:
new Vue({
el: '#computed',
data: {
word: 'welcome',
},
methods: {
alertRev: function() {
// get the word reversed
alert(this.word.split('').reverse().join(''));
},
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.2.6/vue.min.js"></script>
<div id="computed">
Word: {{ word }}
<br />
<br />
<button #click="alertRev">Reverse the word (alert)</button>
</div>
As an aside, computed properties aren't very handy with asynchronous operations.
Hope this doesn't highlight that you could write what I know about Vuejs on the back of a postage stamp with a wet mop.