Vue_Component_with_Composition_API.vue

<template>
  <v-fragment>
    <ul v-if="items.length > 0">
      <li v-for="(item, index) in items" :key="index">{{ item.title }}</li>
    </ul>
    <button v-on:click="fetchMore">Fetch More</button>
  </v-fragment>
</template>
  
<script>
  import { ref, computed, onMounted } from "vue";
  export default {
    setup(props) {
      onMounted(() => console.log("component mounted!"));
      const items = ref([{ title: "Item 1" }, { title: "Item 2" }]);
      const fetchMore = () => {
        items.value = [...items.value, { title: "Fetched item" }];
      };
      return {
        items,
        fetchMore
      };
    }
  };
</script>
  
<style scoped></style>

Documentation:

https://www.vuemastery.com/pdf/Vue-3-Cheat-Sheet.pdf