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 😅