Vue3 access component data attribute from console

Question

How do I access a component data attribute value from the console in Vue 3?

When I was working in vue2 I was accessing this using $vm0 and setting and getting any component attribute value but this does not work in Vue 3.

Vue.js devtools screenshot with data:

Here I want to access isCalendarAttached from Chrome console but I am not able to:

Here is my app object which is the root component:

Is there any way I can access that variable from console?

Answer 1

As of Vue.js devtools v6.0.0+:

$vm0.ctx.isCalendarAttached // Read-only
$vm0.ctx.$data.isCalendarAttached // Read/Write

Or if your state is moved into setup per Composition API:

$vm0.setupState.isCalendarAttached

Note:

1. Vue.js devtools v5 does not support Vue 3 so v6 is required.
2. You'll still need to ensure you've first selected your Vue component in the devtools.