Full-Stack Vue.js 2 and Laravel 5

Computed properties
It's convenient to write logic straight into our template as an expression, for
example, v-if="myExpression". But what about more complex logic that can't be
defined as an expression, or simply becomes too verbose for the template?
For this scenario, we use computed properties. These are properties we add to
our Vue configuration that can be thought of as reactive methods which are rerun
whenever a dependent value is changed.
In the following example, we've declared a computed property, message, under the
computed configuration section. Note the function is dependent on val, that is, the
returned value of of message will be different as val changes.
When this script runs, Vue will note any dependencies of message and will set up
reactive binding so that, unlike a regular method, the function will be rerun
whenever the dependencies change: var app = new Vue({ el: '#app',
data: { val: 1 }, computed: { message() { return `The value is ${this.val}` } }
});
setTimeout(function() { app.val = 2; }, 2000); {{ message }}
Going back to the image carousel, let's make the template terser by abstracting
the expression bound to the image src into a computed property.
resources/assets/js/app.js: Vue.component('image-carousel', { template: ` `, data() { ... },
computed: { image() { return this.images[this.index]; } } });