OptionsAPIxCompositionAPI.js

// useCounter.js
import { ref, computed } from 'vue'

const useCounter = () => {
  const count = ref(0)
  const double = computed(() => count.value * 2)
  const increment = () => count.value++
  return {
 	  count,
    double,
    increment
  }
}
export default useCounter


// Vue component
<template>
  <h1>{{count}}</h1>
  <button @click="resetCounter"> Reset </button>
</template>

<script>
import useCounter from './useCounter'

export default {
  name: 'App',
  setup() {
    const { count }  = useCounter()
    return {
      count
    }
  },
  methods: {
    resetCounter() {
      this.count = 0
    }
  }
}
</script>