Within a component, I have two functions defined. One is foo(), which is defined within <script>, and the other is fooExported(), which is defined in the body of export default {}.
My understanding is that functions inside export default {} can be accessed in the template. Therefore, it seems like the "unexported" function foo() is a "private" function only available within the <script> scope (Is this correct?). What other differences do they have?
Additionally, I'm attempting to access this.$data in the "unexported" method, but I'm getting an error saying undefined. Is it not possible to access the data in this way?
<template>
...
</template>
<script>
function foo(){
console.log(this.$data.message) // error: 'this' is undefined.
}
const bar = 123
export default {
data(){
return {
message: 'MyMessage'
}
},
methods: {
fooExported(){
console.log(this.$data.message) // this works.
}
}
}
</script>
<style scoped>
</style>