Composables

file.ts

// not composable
// just a function or 'business logic'
function add (n1, n2) {
  return n1 + n2
}

// composable
// "bridges" logic and Vue via reactivity
useAdd (_n1 = 0, _n2 = 0) {
  const n1 = ref(n1)
  const n2 = ref(n2)

  const sum = computed(() => {
    return add(n1.value, n2.value)
  }

  return {
    n1, n2, sum
  }
}

// usage
<template>
  Sum is {{ sum }}
  <input v-model="n1" />
  <input v-model="n1" />
</template>

<script setup>
  const { n1, n2, sum } = useAdd(2, 3)
</script>