title: How do I access data from an external file in Vue.js?
body: <p>Still new to Vue.js, but very much enjoying to learn about it. Before I get to using Axios and Vuex store I'd like to understand how can I send some test data from a separate file to my component? Hope someone can help.</p>
  
  <p>If I do this within my component it works:</p>
  
  <pre><code>&lt;script&gt;
  
  export default {
      data () {
          return {
          logItems: [
              { log1d: 1, logDetail: 'This is some log detail for log 1', logType: 'general', createdBy: 'name', CreatedAt: 'date' },
              { log1d: 2, logDetail: 'This is some log detail for log 2', logType: 'general', createdBy: 'name2', CreatedAt: 'date2' },
              { log1d: 3, logDetail: 'This is some log detail for log 3', logType: 'general', createdBy: 'name3', CreatedAt: 'date3' },
              { log1d: 4, logDetail: 'This is some log detail for log 4', logType: 'general', createdBy: 'name4', CreatedAt: 'date4' }
              ]
          }
      }
  }
  </code></pre>
  
  <p></p>
  
  <p>But I assumed I could import it as follows from an external file:</p>
  
  <pre><code>import logs from '~/components/testdata.vue'
  export default {
      data () {
          return {
          logitems: logs
          }
      }
  }
  </code></pre>
  
  <p>And in my testdate.vue file I have: </p>
  
  <pre><code>&lt;script&gt;
  export default {
      data () {
          return {
  
          // Dummy Test Data
          logs: [
              { log1d: 1, logDetail: 'This is some log detail for log 1', logType: 'general', createdBy: 'name', CreatedAt: 'date' },
              { log1d: 2, logDetail: 'This is some log detail for log 2', logType: 'general', createdBy: 'name2', CreatedAt: 'date2' },
              { log1d: 3, logDetail: 'This is some log detail for log 3', logType: 'general', createdBy: 'name3', CreatedAt: 'date3' },
              { log1d: 4, logDetail: 'This is some log detail for log 4', logType: 'general', createdBy: 'name4', CreatedAt: 'date4' }
              ]
          }
          return logs
      }
  }
  </code></pre>
  
  <p></p>
  
  <p>Is anyone able to tell me what am I doing wrong and why putting my data into a separate file doesn't work, please?</p>
  
  <p>Many thanks.</p>