I really like it. Well thoughts. One question is would it be possible to pass another class property to the composition function? This might not be the best example, but something like this. See useCounter taking argument, and here I'm padding in class property as the argument.

function useCounter (amount: number) {
  const count = ref(0)

  function increment () {
    count.value + amount
  }

  return {
    count,
    increment
  }
}

export default class Counter extends Vue {
  amount = 10

  get counter () {
    reactive(useCounter(this.amount))
  }
}

@kiaking You mean like the following code? (passing primitive loses its reactivity and computed does not handle composition functions in this proposal)

function useCounter (amount: Ref<number>) {
  const count = ref(0)

  function increment () {
    count.value + amount.value
  }

  return {
    count,
    increment
  }
}

export default class Counter extends Vue {
  amount = 10

  counter = reactive(useCounter(
    toRef(this, 'amount')
  ))
}

I think we should discourage this usage because this in initializers is different from actual component constructor as same as v7, so amount will not be updated nor reactive in useCounter.

I would say the dependency direction between composition function and component instance should be composition <- instance. This is as same as the canonical Vue api (setup cannot access data, computed, methods etc.). If we want to define some value depended by a composition function, we can include it into the composition function.

function useCounter () {
  const amount = ref(10)
  const count = ref(0)

  function increment () {
    count.value + amount.value
  }

  return {
    count,
    amount,
    increment
  }
}

export default class Counter extends Vue {
  counter = reactive(useCounter())

  mounted() {
    this.counter.amount = 11
  }
}

Ah OK good point. Yes I was afraid of that. I don't have good example here but I suspected there might be shared 3rd party composition function that might require argument to be passed.

But as you mentioned, we could always "wrap" such composition function to be used before assigning to the class component.

// 3rd party composition function. It requires argument.
function useCounter (amount: Ref<number>) {
  const count = ref(0)

  function increment () {
    count.value + amount.value
  }

  return { count, increment }
}

// Wrap the above composition function.
function useWrappedCounter () {
  const amount = ref(10)

  return {
    amount,
    ...useCounter(amount)
  }
}

// Use wrapped function.
export default class Counter extends Vue {
  counter = reactive(useWrappedCounter())

  mounted() {
    this.counter.amount = 11
  }
}

An idea to allow such usecase would be to require wrapping a composition function and delay its initalization:

export default class Counter extends Vue {
  amount = 10

  counter = setup(() => {
    return useCounter(toRef(this, 'amount'))
  })
}

The current problems of this in initializers are

1. this is not an actual reactive data.
2. this.amount is still not reactive value in initializers.

To solve 1. we can just configure proxy getter / setter to actual reactive data for each initialized property. As for 2. we need to delay the invocation of composition function to make sure accessed properties are converted reactive value. We can solve 2. with setup function on the above example.

I noticed that mandating setup helper could also reduce the confusion of manual unwrapping as the helper always does it for us.

I have updated the proposal regarding the above setup helper idea.

Nice! I really dig the new setup function. It also shows that property is more "special" interns of composition api. 👍

Since Vue core changed the unwrapping behavior of setup (from deep to shallow), Vue Class Component follows that direction. I've updated the original post to add setup unwrapping section. You can see the detailed unwrapping behavior of setup in Vue Class Component there.

Since setup() for variables used on the state add a bunch a unwanted boilerplate I am asking similarly as for props, would there be ways to define (state) variables used on the template inside the class ?
related: how can vue class component leverage https://github.com/vuejs/rfcs/blob/sfc-improvements/active-rfcs/0000-sfc-script-setup.md ? (maybe that you could influence the design of the RFC while its active btw)

@LifeIsStrange I'm afraid I don't understand what you mean. Could you elaborate "ways to define (state) variables used on the template inside the class"?

I'm not sure how we can integrate class component with the new <script setup> because it will not probably be class component anymore?

Please file a new story for a bug report. Thanks.

@LifeIsStrange I'm afraid I don't understand what you mean. Could you elaborate "ways to define (state) variables used on the template inside the class"?

<template>
  <div>Count: {{ counter.count }}</div>
  <button @click="counter.increment()">+</button>
</template>

<script lang="ts">
import { ref, reactive, onMounted } from 'vue'
import { Vue, setup } from 'vue-class-component'

function useCounter () {
  const count = ref(0)

  function increment () {
    count.value++
  }

  onMounted(() => {
    console.log('onMounted')
  })

  return {
    count,
    increment
  }
}

export default class Counter extends Vue {
  counter = setup(() => useCounter())
}
</script>

If I understand correctly, this (your) example show how we can make hybrid class components using composition functions, which is nice even if I don't get much the value of it because part of the logic is outside the class.
But like for Vue2, will we still be able to make the functionally similar but much more concise component:

<template>
  <div>Count: {{ count }}</div>
  <button @click="increment()">+</button>
</template>

<script lang="ts">
import { ref, reactive, onMounted } from 'vue'
import { Vue, setup } from 'vue-class-component'

export default class Counter extends Vue {
  count = 0

  increment () {
    this.count++
  }
}
</script>

If so do we have guarantee that this existing way will remain supported for the foreesable future and not be deprecated by the composing function api ?
And can this existing way leverage Vue3 features ?

@LifeIsStrange You can still do the existing way.

The purpose of adding the setup helper is just to be able to use composition functions in a class component so that it allows more flexible usage with it. e.g. Allow using a composition function provided by external libraries. I don't mean to deprecate the existing way to define the component nor recommending the new way.