Vue js external data object
<p>I'm just starting out and have gone through the Vue guide. I've got some basic grasp on imports and exports of ES6 but wanted to know the ideal way of doing this.</p>

<p>I'll have several components that need an original single source of data that i'll need to individually manipulate from there. Ideally I want that data to be in a separate file so that others can manipulate it. </p>

<p>I can figure out to do this via jquery ( seen below ) but I don't really need to make a call as the json file will be internal:</p>

<pre><code>module.exports = {
data: function () {
    return {
        msg: 'hello',
        whatever : 'hi'
    }
},
created : function() {
    this.fetchData();
},
methods : {
    fetchData : function() {
        console.log("WORKING");
        var self = this;
        $.get( apiURL, function( data ) {
                self.items = data;
                console.log(data);
        });
    }
}
</code></pre>

<p>}</p>

<p>But I also don't want to have all the data be in the App.vue file. I need it somewhere else and then need it to replace my data.</p>

<p>Is the best way to do this to create another Vue file with no template or styling and just create it's own module.exports data object? Say mydata.vue:</p>

<pre><code>module.exports = {
data: function () {
    _mydata = {
        items : [
            {case:'caseone'},
            {case:'casetwo'}
        ],
        otheritems : [
            {case:'caseone'},
            {case:'casetwo'}
        ]
    }
}
</code></pre>

<p>}</p>

<p>And then somehow replacing this data object in mydata.vue with the data object in app.vue with imports ( main. js ) ?</p>

<pre><code>import Vue from 'vue'
import App from './App.vue'
import Data from './SiteData.vue'
</code></pre>

<p>Just wanted to check if this was the ideal way/i'm on the right path...or if there is an easier way to have a central data object in a different file for all my components?</p>