Netlify build causes reading from undefined error vuejs - vue.js

Question

I am trying to develop an application in vuejs and deploy it using netlify. Note that I am very new to vuejs. I have no warnings or errors in production but when deploying, the website is blank and the following error appears in console :
TypeError: Cannot read properties of undefined (reading 'currentPath')
at index.7d385d0f.js:54:2330
at ls (index.7d385d0f.js:1:23187)
at Proxy.<anonymous> (index.7d385d0f.js:54:2247)
at vn (index.7d385d0f.js:1:15170)
at Jn.b [as fn] (index.7d385d0f.js:1:38048)
at Jn.run (index.7d385d0f.js:1:4525)
at G.c.update (index.7d385d0f.js:1:38314)
at G (index.7d385d0f.js:1:38340)
at rt (index.7d385d0f.js:1:37206)
at ve (index.7d385d0f.js:1:37000)
I only use "currentPath" in one file :
In the <script> tag :
export default {
data: {
currentPath: "",
},
data() {
return {
currentPath: window.location.hash || "",
};
},
computed: {
currentView() {
return routes[this.currentPath.slice(1) || "/"].route || NotFound;
},
},
mounted() {
window.addEventListener("hashchange", () => {
this.currentPath = window.location.hash || "";
});
},
};
In my html :
<template>
<notifications />
<header class="header">
<a
v-for="(route, url) in routes"
:key="route.name"
class="header-item"
:class="{ 'header-item-current': this.currentPath === `#${url}` }"
:href="`#${url}`"
>
{{ route.name }}
</a>
</header>
<component class="content" :is="currentView" />
</template>

Answer 1

Okay it would seem it is not necessary (and even causes problems) to use 'this.' inside the html of a vuejs SFC.
I have changed
<a
v-for="(route, url) in routes"
:key="route.name"
class="header-item"
:class="{ 'header-item-current': this.currentPath === `#${url}` }"
:href="`#${url}`"
>
{{ route.name }}
</a>
to
<a
v-for="(route, url) in routes"
:key="route.name"
class="header-item"
:class="{ 'header-item-current': currentPath === `#${url}` }"
:href="`#${url}`"
>
{{ route.name }}
</a>
and not only has the error gone away but everything works fine !