В чем суть вычисляемых свойств в Vue.js?

Меня интересует когда и зачем используются эти вычисляемые свойства, ведь если я не ошибаюсь то можно встраивать выражения тогда немного не понятно зачем есть вычисляемые свойства, был бы рад примеру)

Да, есть выражения, но в случае если будет очень сложная и обширная логика у выражения то в дальнейшем будет сложно поддерживать такое приложение, в общем лучше обойтись без каши реализации в html части, а основные вычисляемые значения записывать в свойство computed:

var viewModel = new Vue({
el: '#app',
data: {
message: 'Привет ',
moremessage:'меня зовут Александр ',
work:'и я веб-разработчик!'
},
computed: {
bigMessage: function () {
return this.message this.moremessage this.work;
}
}
})

В первом блоке создаем экземпляр Vue, привязываем по id к определенному блоку в html разметке, затем задаем ряд свойств в data, ниже создаем computed где будут все вычисляемые значения.

<div id="app">
Одно сообщение: "{{ message }}"
Куча операций в html: "{{ message moremessage work }}"
Составное сообщение из всех значений свойств data: "{{ bigMessage }}"

Далее в html у нас есть три переменные которые нам нужно записать в html документ, захламлять документ кучей переменных и операций над ними не очень хорошо, поэтому лучше положить всё в computed, все вычисляемые свойства, так логичнее и эффективнее, в дальнейшем мы сможем использовать повторно значение bigMessage, и не придется его склеивать из кучи свойств много раз.