Vue 3 Composition API example

vue-3-composition-api-example.vue

<template>
  <div
    @click="$emit('created')"
  >
  </div>
</template>

<script setup>
// Imports from VUE
import { onMounted, ref, defineProps, defineEmits, computed } from 'vue';

// Imports from VUE-ROUTER
import { useRouter, useRoute } from 'vue-router'

// PROPS
const props = defineProps(['total'])

// EMITS
const emit = defineEmits(['created'])

// Router
const router = useRouter();
const route = useRoute();

const id = route.params.id
const slug = route.query.slug

// Computed Property
const total = computed(() => {
  return item.value.count;
});

// Reactivity State
const item = ref({
  count: 0,
});

// Methods
const list = () => {
  axios.get(`total`)
    .then(response => {
      item.value.count = response.data;
      
      // Emits event
      emit('created')
    })
}

// Lifecycle Hooks
onMounted(() => {
  list();
});
</script>