Recently, I started working with Vue and am now faced with the task of maintaining a project. Main.js contains the routing structure:
Main.js
import Vue from 'vue'
const app = new Vue({
el: '#app',
data: {
message: 'Hello Vue!'
}
});
pages/page.vue
<span>{{ message }}</span>
The challenge I'm encountering is trying to display the "message" from the data in an external template located at "../pages/page.vue". However, when I include {{message}}, I receive the following error:
[Vue Warn]: Property or method "message" is not defined on the instance but referenced during render. Make sure to declare reactive data properties in the data option.
Any help would be greatly appreciated!