'when to use data() and when to use setup() in vue3?

I am still new to Vue and when I was using vue 2, I always used this:

data() {
        return {
           ....
        }
}
methods: {
  ....
}

but now I see a lot of docs with

setup() {
 const .....
 return { ... }

}

are these essentially the same? when would be a use case for data() vs setup()?

vuejs3

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Solution	Source