[gavinray]

Have you considered that this might be an issue on your end, and not the V3 Composition API's end?

4 year Vue dev here (right after 2.0 release). In Vue 2, you have a bunch of "magic" properties. Your state goes under the "data" key, computed properties go under "computed", methods go under... etc. Then you have the lifecycle hook magic methods: "created()", "destroyed()", etc.

In Vue 3, you have one function -- "setup()". This function returns the stuff you want to use inside of your component. This could be state/reactive data using "reactive()" or "ref()", derived data using "computed()", watchers, plain functions, whatever.

If you need to use lifecycle hooks, then you put an "onMounted(() => {})" or whatever in your "setup()".

The API was stripped down to essentially one initialization method where you set up everything you need.

Though to be fair, these days I write Vue like a weirdo and I use JSX with it.

  const App = defineComponent({
    setup() {
      const state = reactive({ count: 0, msg: "Hello" })
      const doubledCount = computed(() => state.count * 2)
      const inc = () => count.value++
      
      return () => (
        <div onClick={inc}>
          <p>{state.count}: {state.doubleCount}</p>
          <p>{state.msg}
        </div>
      )
    }
  })