What is `<script setup>` and what are its benefits?

<script setup> is compile-time syntactic sugar for using the Composition API inside Single-File Components. Benefits:

• Less boilerplate — no need to return variables/functions for template use.
• Top-level bindings are automatically exposed to the template.
• Better runtime performance (compiler can optimize render function generation).
• Better IDE type-inference support, especially with TypeScript.

<script setup>
import { ref } from 'vue'
const count = ref(0)
function increment() { count.value++ }
</script>

<template>
  <button @click="increment">{{ count }}</button>
</template>