title: Data Fetch in Vue.js Single File Component
body: <p>my data fetch works fine when is used globally but once I stick in the single file component is not returning the items. What I'm doing wrong?</p>
  
  <p><em>ladeditems.vue</em></p>
  
  <pre><code>&lt;template&gt;
  &lt;div&gt;
    &lt;ul v-for="item in items"&gt;
      &lt;li&gt;
        {{item.title}}
      &lt;/li&gt;
    &lt;/ul&gt;
  &lt;/div&gt;
  &lt;/template&gt;
  
  &lt;script&gt;
  export default {
    components: {'tiny-slider': VueTinySlider},
    name: 'ladeditems',
    data: {
      items: null
    },
    methods: {
      fetchData: function () {
        let self = this
        const myRequest = new Request('https://jsonplaceholder.typicode.com/posts')
  
        fetch(myRequest)
          .then((response) =&gt; { return response.json() })
          .then((data) =&gt; {
            self.items = data
            // console.log(self.items)
          }).catch( error =&gt; { console.log(error); });
      }
    },
  
    mounted() {
      this.fetchData()
    }
  }
  &lt;/script&gt;
  </code></pre>