Value not updating from axios response in vue

I am not able to update the object temp after the axios call.

Please help.

This is whole code. I have used the component in vue. I am very new to vue and components.

I have modified the code. Please check again. I am using the component. Moreover in the Vue tab of the Chrome developer tools i am only seeing component as Root not able to see Shipping Address other component inside the root.

Below is app.js

require('./bootstrap');

window.Vue = require('vue');

import axios from 'axios';
window.axios = axios;

Vue.component('shipping-address', require('./components/ShippingAddress.vue'));

const app = new Vue({
    el: '#app',
});
export default app;

<div id="app">
    <shipping-address ></shipping-address>
</div>

<template>
  <div>
    SName: <span>{{temp}}</span>                    
  </div>
</template>
<script>
export default {
  data(){
    return{
        temp:'a'
    }
  },
  mounted(){
      this.fetchArticles();
  },
  methods:{
      fetchArticles() {
          this.temp = 'b'
          const vm = this;
            axios.get('user/addresses')
            .then(response=>{this.temp = 'c';})
            .catch( error => console.log(error));
        },
  }
}
</script>