Vue has something called computed properties. Those are used to do computations on variables from the data object.
What we are going to do in this part of the course is to show the number of interest the card has,
because who wants to count manually?
We'll start by added an extra expression to the html. Note that it looks just like an expression from the data object, but this expression returns the value of a computed property.
We also need to add a new array to our Vue instance. This array is called "computed" and will contain all of our computed properties. Inside the computed array we'll have a list of functions.
If you open index.html in your browser now you should see something like this:
Properties that are computed are cached. Meaning that if you loop through a list and do something with it and show the property in your template more than once it will only do the computation once. Only when the data object is changed the computed property will change. This is called reactivity which we will come back to later in the course.
The mini challenge of this part is to make another computed property. This time I want you to make a computed property that reverses the name variable and prints it right underneath the original name. This will not be a part of the course so when you're finished you can just remove it.