This is a short note on handling VueJS Observer inside a component.

Tested Configuration:
VueJS: 2.6

The problem

Let’s say you are inside a VueJS component (or in VueX component) and you make a console.log(obj). Instead of the expectd result you see [__ob__: Observer]

What is an Observer ?

That’s a special property added by Vue, it’s part of the Reactivity system which allows Vue to track data changes and react to them
LinusBorg

You can read more here.

So when does this happen ?

It could happen that you are trying to use a reactive props, computed or even trying to access $store elements (without using $getters for instance).

The solution

This should be a quick fix (From Evan You, creator of VueJS):

var parsedyourElement = JSON.parse(JSON.stringify(this.yourElement))
console.log(parsedyourElement)

Note that you obviously loose reactivity doing so 😅

Ressources:

Evan You solution