Let's say I had this:

```
var app = new Vue({
  el: '#app',
  data: {
    message: Math.random()
  }
})

```

And let's say that I wanted to see what value data.message had been assigned in the JS console. How would I do this?

Superficially it seems like doing `console.log(app.data.message)` would do the trick but when I try to do that I get a `Uncaught TypeError: Cannot read properties of undefined (reading 'message')` error. In fact, it turns out that `app.data` is undefined.

So how can I do this?

Here's a JS fiddle with this code:

<https://jsfiddle.net/dfzun3by/4/>

That code is based off of <https://v2.vuejs.org/v2/guide/?redirect=true#Declarative-Rendering>

As a corollary to this question... in some production code that I'm now responsible for we don't have that - we have something more akin to this in a \*.vue file:

```
export default {
  data() {
    return {
      message: Math.random()
    }
  }
}

```

I tried to do `console.log(app)` in the JS console of the page that that corresponds to and got a `Uncaught ReferenceError: app is not defined` error so how could I do the same thing in the production code?