Vue3项目class-style component syntax的问题

现在使用vuecli创建的vue3 class-style风格的项目的组件默认如下。请问这种模式下还需要使用setup吗?
import { Options, Vue } from ‘vue-class-component’
@Options({})
export default class Home extends Vue {}

这种风格的好像不需要写ref、toRefs、reactive这些响应式的东西,奇怪????

我在这组件里面这样写:
import { reactive, toRefs } from ‘vue’

import { Options, Vue } from ‘vue-class-component’

interface User{
name:string,
phone:string
}
@Options({
})
export default class Home extends Vue {
setup() {
const user:User = reactive({
name: ‘张三’,
phone: ‘12345678910’
})
return {
…toRefs(user)
}
}
}

在template里面拿不到数据。

name: {{name}}
phone: {{phone}}

后台报异常:
runtime-core.esm-bundler.js?5c40:6551 [Vue warn]: Property “name” was accessed during render but is not defined on instance.
at <Home onVnodeUnmounted=fn ref=Ref< undefined > >
at
at

runtime-core.esm-bundler.js?5c40:6551 [Vue warn]: Property “phone” was accessed during render but is not defined on instance.
at <Home onVnodeUnmounted=fn ref=Ref< undefined > >
at
at

上面class-style的风格跟以下这中传统风格有什么区别:
export default defineComponent({
name: “Hmoe”,
setup() {
return{}
}
})

跪求大神指点