Composition API와 Options API의 차이점은 무엇인가요?

<script>
export default {
  data() { return { count: 0 }; },
  computed: { double() { return this.count * 2; } },
  methods: { increment() { this.count++; } },
  mounted() { console.log("mounted"); },
};
</script>

<script setup>
import { ref, computed, onMounted } from "vue";

// "카운터"에 대한 모든 로직이 함께 있음
const count = ref(0);
const double = computed(() => count.value * 2);
function increment() { count.value++; }
onMounted(() => console.log("mounted"));
</script>

// useCounter.js — 어떤 컴포넌트에서든 재사용 가능
export function useCounter() {
  const count = ref(0);
  const increment = () => count.value++;
  return { count, increment };
}

<script setup>
const { count, increment } = useCounter(); // 어디서나 재사용
</script>

Options API     → 단순한 멘탈 모델, 작은 컴포넌트에 적합, 초보자에게 친숙
Composition API → 큰 컴포넌트, TypeScript, 로직 재사용(composable)에 더 적합