title: Vue.js: how do you set a data variable in a vue method inside a .vue template file
body: <p>I am learning vue.js for the first time tonight and I can't wrap my head around why when I set a "list" array in the data function, i cannot change it in a method below. I have the following code and my template still spits out my original {name: 'daniel'}, {name: 'lorie'} variable.</p>
  
  <p>My http call is definitely being made as i can see an array of like 100 users in the network tab, but "this.list = data" is not resetting my data variable</p>
  
  <pre><code>&lt;template&gt;
    &lt;pre&gt;{{list}}&lt;/pre&gt;
  &lt;/template&gt;
  
  &lt;script&gt;
  export default {
    data () {
      return {
        list: [{name: 'daniel'}, {name: 'lorie'}]
      }
    },
    created () {
      this.fetchContactList()
    },
    methods: {
      fetchContactList () {
        this.$http.get('https://jsonplaceholder.typicode.com/users', (data) =&gt; {
          this.list = data
        })
      }
    }
  }
  &lt;/script&gt;
  
  &lt;!-- Add "scoped" attribute to limit CSS to this component only --&gt;
  &lt;style lang="scss"&gt;
    ul.user-list {
      background: #fafafa;
      border:1px solid #ebebeb;
      padding:40px;
      li {
        list-style: none;
        display: block;
        margin-bottom:10px;
        padding-bottom:10px;
        border-bottom:1px solid #ebebeb;
      }
    }
  &lt;/style&gt;
  </code></pre>