Writing Reusable Vue Composables - Introduction - Composition API

AsCompositionApi.vue

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

<script>
import { computed, ref } from 'vue';

export default {
  name: 'AsCompositionApi',

  props: {
    parentNumber: {
      type: Number,
      required: true,
    },
  },

  setup(props) {
    const myNumber = ref(1);
    
    const addNumber = () => {
      myNumber.value += 1;
    };
    
    const myNumberPlusOne = computed(() => props.parentNumber.value + 1);
    
    return {
      myNumber,
      addNumber,
      myNumberPlusOne,
    };
  },
};
</script>