I'm finding myself in a bit of a maze when it comes to understanding how data functions within single file components for VueJS. For instance, in a file named test.vue, my understanding is that you would script something like this:
export default {
name: 'Testapp',
data () {
return {
msg: 'sample message'
}
}
}
Then in another file, let's call it vuescript.js, I might have the following code and reference it from an HTML file:
import Vue from 'vue' import VApp from './test.vue'
var vueApp = new Vue({
el: '#app',
render: h => h(VApp)
})
The question arises: How can I access the data object of that template? Ideally, I'd like to create code elsewhere that retrieves data from a server and can be shared across multiple components. This way, there would be a part of data that remains consistent and updates from a central source, while also allowing for component-specific data such as settings and metadata.
In short, I've hit a roadblock after doing some research on how data is accessed and handled within Vue single file components.