Access $el inside a computed property - vue.js

Question

I'm trying to access this.$el.offsetTop in a computed property, but get the error:
Cannot read property 'offsetTop' of undefined
How can I access the offsetTop of the component in a computed method? if this is not possible then is there an alternative?
Component:
<template>
<div :class="{ 'active' : test }"></div>
</template>
<script>
export default {
computed: {
test() {
console.log(this.$el.offsetTop);
}
}
}
</script>

Answer 1

If a computed property is used in the template, its method will fire before the Vue instance is mounted, so this.$el will be undefined.
If your computed property is dependant on some property of this.$el, you can set it to a data property in the mounted hook (where this.$el will be defined).
In your case:
<template>
<div :class="{ 'active' : test }"></div>
</template>
<script>
export default {
data() {
return { offsetTop: null };
},
computed: {
test() {
console.log(this.offsetTop);
}
},
mounted() {
this.offsetTop = this.$el.offsetTop;
}
}
</script>

Answer 2

Here's what I did to solve this problem:
I set an el property to null in the component's data, and in the mounted hook, I set this.el to this.$el. Then, in the computed property, I check this.el before trying to access its properties to avoid an error during the first render. So, in the context of your example we'd have:
<template>
<div :class="{ 'active' : test }">{{test}}</div>
</template>
<script>
export default {
data: {
el: null,
},
computed: {
test() {
return this.el ? this.el.offsetTop : 0;
}
},
mounted(){
this.el = this.$el;
}
}
</script>
As a side note, I don't believe you have access to the console in Vue.js computed properties, so I removed that bit.