I require two js files in my app. the first(app.js) is to be general js file that all pages/views would use. The second(page1.js) is to be a page/view specific js file.
I instantiate a new Vue instance in app.js like so:
new Vue({
el : '#app',
data: {
balance: 0
},
ready: function() {
},
methods : {
},
})
Next, in the page1.js file I instantiate another Vue instance like so:
new Vue({
el : '#headerSection',
data: {
},
ready: function() {
console.log(this.balance)
},
methods : {
},
})
However, when I try to access the balance data object I get an error of undefined.
In the html I require the app.js file before the page1.js
I suspect my second instantiation of the Vue Instance is overwriting the first instance.
How do I go about separating the Vue elements over two js files?