Currently, I am attempting to modify a boolean variable. Upon the initial page load, everything works as expected. However, upon reloading the page, the variable gets updated locally within the method but not in the global data section. As a result, an error continues to appear in the console stating: "Uncaught (in promise) TypeError: Cannot read property 'value' of undefined at invokeDirectiveHook"
I'm wondering if there is something crucial that I may have overlooked?
<template>
<p>Value: {{ val }}</p>
<button @click="changeMe">Click Me</button>
</template>
<script>
import { ref } from 'vue';
export default {
data() {
return {
val: ref(false);
},
},
methods: {
changeMe() {
this.val = !this.val;
}
}
}
</script>