title: how to use data value inside mounted vue js
body: <p>I want to assign props value in data and use this data value inside mounted. right now my approach is which is not working:</p>
  
  <p><strong>dashboard.vue</strong></p>
  
  <pre><code>&lt;template&gt;
      &lt;div&gt;
          &lt;navigation-section :userid='userID'
                              :username='username'
                              :profilepic='profile_pic'
                              :unreads='unreads'&gt;
          &lt;/navigation-section&gt;
      &lt;/div&gt;
  &lt;/template&gt;
  
  &lt;script&gt;
      import NavigationSection from '../components/NavigationSection';
  
      export default {
          components: {   
              NavigationSection,
          },
  
          data() {
              return {
                  posts: [],
                  userID: '',
                  username: '',
                  unreads: [],
                  profile_pic: '',
              }
          },
  
          created() {
              this.getNavInfo();
          },
  
          methods: {
              getNavInfo() {
                  axios.get('get_nav_info').then(response =&gt; {
                      this.userID = response.data.userID;
                      this.username = response.data.username;
                      this.profile_pic = response.data.profile_pic;
                      this.unreads = response.data.unreads;
                  })
              }
          }
      }
  &lt;/script&gt;
  </code></pre>
  
  <p><strong>NotificationSection</strong> (child of dashboard.vue)</p>
  
  <pre><code>&lt;template&gt;
      &lt;div&gt;
          &lt;notification :userid='userid' :unreads='unreads'&gt;&lt;/notification&gt;
          &lt;h1&gt;{{ username }}&lt;/h1&gt;     
          &lt;img :src='profilepic' :alt='profilepic'&gt; 
  
  
      &lt;/div&gt;
  &lt;/template&gt;
  
  &lt;script&gt;
      import Notification from '../components/Notification';
  
      export default {
          props:['userid', 'username', 'unreads', 'profilepic'],
          components: {
              Notification
          }
      }
  &lt;/script&gt;
  </code></pre>
  
  <p><strong>Notification</strong> (child of NotificationSection.vue)</p>
  
  <pre><code>&lt;template&gt;
      &lt;div&gt;
          // values shows in template
          unreads array length: &lt;div class="count" v-if='unreads.length &gt; 0'&gt;{{ unreads.length }}&lt;/div&gt;
          userid : &lt;p&gt;{{ userid }}&lt;/p&gt;
      &lt;/div&gt;
  &lt;/template&gt;
  
  &lt;script&gt;
      export default {
          props:['unreads', 'userid'],
  
          computed: {
              userID() {
                  return this.userid 
              }
          },
  
          mounted() {
              console.log(this.userID); // ** problem : in console.log shows a blank instead of id which is working on template. 
          }   
      }
  
  &lt;/script&gt;
  </code></pre>
  
  <p><a href="https://i.stack.imgur.com/gqUMI.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/gqUMI.png" alt="enter image description here"></a></p>
  
  <p>i have edited the question. the values are showing in template but when i want to use the props value inside mounted or event try to access data value inside script it doesnt work. advance thanks for help. </p>