Computed property triggers before onBeforeMount - vue.js

Question

I am getting an error because my computed property is expecting for some variable to be full of data, but I do my data loading in onBeforeMount which for some reason is being triggered AFTER my computed property.
MY THEORY WHY THIS IS HAPPENING:
When I remove my watcher the problem goes away.
Watcher triggers the computation of the "myComputedProperty" because it needs the old value so it can compare it to the new value and it does that as soon as watch() is called.
Does that mean I have to register my watchers in onBeforeMount to avoid this type of behavior?
Relevant code:
<script setup>
import { ref, watch, computed, onBeforeMount } from 'vue';
onBeforeMount(() => {
console.log("onBeforeMount")
valueThatIsFilledInBeforeMount = 1;
});
const myComputedProperty = computed(() => {
//some code
return valueThatIsFilledInBeforeMount + 1;
})
watch(myComputedProperty , async (newValue, oldValue) => {
//some code
})
</script>
Stuff I am using:
"#quasar/extras": "^1.0.0",
"axios": "^0.21.1",
"fast-xml-parser": "^4.0.10",
"pinia": "^2.0.11",
"quasar": "^2.6.0",
"vue": "^3.0.0",
"vue-router": "^4.0.0",
"xlsx": "https://cdn.sheetjs.com/xlsx-0.18.11/xlsx-0.18.11.tgz"

Answer 1

Did you try initialising your valueThatIsFilledInBeforeMount in your data Export?
I tested it with my config and unless im not exporting my valueToCompute with an initial value (0 or null or smth.) my computed value works just fine:
export default {
data() {
return {
valueBeforeMount: null,
}
},
beforeMount() {
this.valueBeforeMount = 1;
},
computed: {
valueBeforeMountComp() {
return this.valueBeforeMount + 1;
},
},
watch: {
valueBeforeMountComp: function(newVal, oldVal) {
console.log(newVal) // Should be 2
console.log(oldVal) // Should be 1
},
}
}
At least if i get your problem right.