Using Vue.js Computed Properties to Reflect Changes in the VDOM

Explain how to define computed properties in a Vue.js component and how it facilitates minimizing updates to the Virtual DOM.
<div id='app'>
  <p>Original price: {{ originalPrice }}</p>
  <p>Discounted price: {{ discountedPrice }}</p>
HTML structure featuring an instance of the Vue component that displays both the original and the discounted prices.
new Vue({
  el: '#app',
  data: {
    originalPrice: 100,
    discountRate: 0.2
  computed: {
    // A computed property that calculates the discounted price
    discountedPrice: function() {
      return this.originalPrice - (this.originalPrice * this.discountRate);
Vue instance defining a computed property 'discountedPrice' that automatically recalculates whenever its dependent properties, 'originalPrice' or 'discountRate', change.
p {
  font-family: 'Arial', sans-serif;
CSS styling for the paragraph elements to use the Arial font-family.