Если результат вашей функции не опирается на внутренние данные, используйте methods.
Например, у вас есть внутри vue некая range, которая служит верхней границей для Math.random. Если реализовать при помощи метода, то каждый раз он будет возвращать новое значение Math.random.
Реализация через computed будет ожидать изменений вашего range, а иначе вернет то же число, которое сгенерилось первый раз
js:
var app = new Vue({
el: '#content',
data: {
range: 1
},
computed: {
rand: function () {
return Math.random() * this.range ; //ожидалось что app.rand будет давать случайное число
}
},
methods: {
show: function (event) {
alert('Случайное число: ' + this.rand); // но нет, число одно и то же
},
}
});
html:
<div id="content">
<button v-on:click="show">показать число</button>
</div>
В итоге оно сгенерирует число один раз и будет выводить его постоянно при клике на кнопку. Если вы введете в консоли app.range = 2; то генерируемое число разово изменится.
Пример для лайков, упомянутый в комментарии:
new Vue({
el: '#content',
data: {
likes: 0,
},
});
<div id="content"><button v-on:click="likes += 1">+1</button></div>
