SimpleComponent.vue

<template>
  <div>
    <div>{{ greeting }}</div>
    <div>
      The original number is: <strong>{{ myNumber }}</strong>
    </div>
    <div>
      The computed property makes it: <strong>{{ addOne }}</strong>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      greeting: "Hello World",
      myNumber: 1
    };
  },
  computed: {
    addOne() {
      return this.myNumber + 1;
    }
  }
};
</script>