How to access variables in a Vue component from the JS Console?

Question

I have a template like this:

Answer 1

Here's what I put in the Console, and it immediately modifies the data shown on the page:

myapp = app.__vue__.$children[0]
myapp.hello = 'Bonjour'
myapp.hello = 'Buenos dias'

Mysteriously, if you skip assigning the object to a variable, it doesn't work as intended:

app.__vue__.$children[0].hello = 'Bonjour'       // first time it works
app.__vue__.$children[0].hello = 'Buenos dias'   // second time it doesn't work

Answer 2

There is a similar discussion on the Vue.js forum. Specifically, SevenLines post on Mar 25 2018 reads:

Update from 2018. If you use vue-devtools, you can access Vue from console by selecting desired component, and then accessing it through $vm variable. Check the image with example:

Answer 3

I use this

// if result is single element
document.getElementById('app').__vue__

// if result is multiple elements
document.getElementsByClassName('some-class')[0].__vue__

assuming your using id #app for your entry

can also do it in other elements as long as identified as Vue Component element

and get element by tag/id/class