我用的是vue3的语法，请你生成vue3的对应例子

当然，我很乐意帮助你。在Vue 3中，我们使用Composition API进行组件开发，这是一个更灵活、模块化的API。这里有一个简单的Vue 3 Composition API组件的例子：

<!-- main.js (入口文件) -->
<script setup lang="ts">
import { ref, onMounted } from 'vue'

// 定义一个响应式的数量计数器
const count = ref(0)

onMounted(() => {
  // 假设我们从API获取初始值并更新计数器
  const initialValue = fetchInitialValue()
  count.value = initialValue
})

// 模拟API调用获取初始值
function fetchInitialValue() {
  return new Promise((resolve) => setTimeout(resolve, 1000, 5))
}
</script>

<template>
  <div>
    <button @click="increment">Increment</button>
    <p>Count: {{ count }}</p>
  </div>
</template>

在这个例子中：
- `ref` 是用来创建响应式数据的，`count` 变量会在组件实例中自动跟踪它的值变化。
- `onMounted` 是生命周期钩子，确保在DOM渲染完成后再执行异步操作（如从API获取初始值）。
- `@click="increment"` 是事件绑定，当按钮被点击时，会触发 `increment` 函数。
- `{ { count }}` 是模板插值，显示当前的计数值。

如果你对其他概念或功能有疑问，比如自定义指令、计算属性、watch等，随时告诉我。