Understanding computed properties
Computed properties are unique data types that will reactively update only when the source data used within the property is updated. By defining a data property as a computed property, we can perform the following activities:
- Apply custom logic on the original data property to calculate the computed property’s value
- Track the changes of the original data property to calculate the updated value of the computed property
- Reuse the computed property as local data anywhere within the Vue component
By default, the Vue engine automatically caches the computed properties, making them more performant at updating the UI than using the property of the returned value of data, or using a Vue component’s method.
The syntax of a computed property is like writing a component method with a return value, nested under the computed property of the Vue component:
export default {
  computed: {
    ...
