Writing Reusable Vue Composables - Introduction - Options API

AsOptionsApi.vue

<template>
  <div>
    <p>My Number - {{ myNumber }}</p>
    <p>Parent Number - {{ parentNumber}} - {{ parentNumberPlusOne }}</p>
    
    <button @click="addNumber()">
      Add
    </button>
  </div>
</template>

<script>
export default {
  name: 'AsOptionsApi',
  
  props: {
    parentNumber: {
      type: Number,
      required: true,
    },
  },
  
  data() {
    return {
      myNumber: 1,
    };
  },
  
  methods: {
    addNumber() {
      this.myNumber += 1;
    },
  },

  computed: {
    myNumberPlusOne() {
      return this.parentNumber + 1;
    },
  },
};
</script>