beforeRouteUpdate not recognizing function - vue.js

Question

When I try to call this.getData() in beforeRouteUpdate it just spits out this error
"TypeError: this.getData is not a function"
From looking at other peoples examples this work, but they weren't using async/await.
<script>
export default {
async beforeRouteUpdate(to, from, next) {
await this.getData()
next()
},
data() {
return {
word: null,
}
},
async created() {
await this.getData()
},
methods: {
async getData() {
const resp = await axios.get(
'http://127.0.0.1:8000/api/word/' + this.$route.params.word,
{ validateStatus: false }
)
console.log(resp)
switch (resp.status) {
case 200:
this.word = {
word: resp.data.word,
definition: resp.data.definition,
}
break
case 404:
this.word = null
break
}
},
},
}
</script>

Answer 1

The concept you want use it, is called "prefetch".
It's better use this solution:
beforeRouteEnter(to, from, next) {
axios.get(
'http://127.0.0.1:8000/api/word/' + this.$route.params.word,
{validateStatus: false}
)
.then(resp => {
next()
})
.catch(error => {
})
},
beforeRouteUpdate(to, from, next) {
axios.get(
'http://127.0.0.1:8000/api/word/' + this.$route.params.word,
{validateStatus: false}
)
.then(resp => {
next()
})
.catch(error => {
})
}
NOTE 1: You don't access to this in beforeRouteEnter (to use methods). Because your component doesn't mounted yet.
NOTE 2: To avoid fetch duplication (DRY principle), you can modularize fetching (like vuex actions) and call it.