title: Set data object to value from Promise in Vue 3
body: <p>I'm trying to set the <code>data()</code> value in a <code>Vue</code> instance to a value retrieved from a Promise that is returned from a <code>mongodb api</code> call. I'm able to retrieve the data I'm trying to implement, however am struggling to use it in the <code>data()</code> field so that I can access it in the template.</p>
  
  <p>Some of the solutions I've found from <code>vue2</code> don't seem to work in this instance. Thanks in advance.</p>
  
  <p><strong>Vue</strong></p>
  
  <pre><code>&lt;template&gt;
    &lt;Article :title=posts[0].title&gt;&lt;/Article&gt;  // Another Vue component
  &lt;/template&gt;
  
  let stories;
  
  export default {
         data() {
              return {
                  posts: {}
              }
         },
          methods: {
              loadPosts() {
                  stories = getPosts(); // makes an api request to a mongodb that returns a Promise
                  stories.then(function(response) {
                      this.posts = response.posts;
                      console.log(response.posts[0].title); // "My Post Title"
                  });
  
              }
          },
          mounted() {
              this.loadPosts();
          }
  }
  </code></pre>
  
  <p>The error I receive says </p>
  
  <blockquote>
    <p>Uncaught (in promise) TypeError: Cannot set property 'posts' of undefined</p>
  </blockquote>
  
  <p>in reference to <code>this.posts = ...</code></p>