title: Axios GET return [0, 0, 5] instead of UUIDs from database using Laravel and Vue JS
body: <p>This problem looked so simple for me when I face with it  yesterday! But when I didn't find similar question on google I realized it is not as simple as what I thought!!!<br/>So if there is any similar question that I didn't find since yesterday please let me know.<br/><br/>
  I'm trying to pass data from database using Laravel. I used UUID as primary key for Notifications table instead of auto-increment primary key (this is a default option for notifications table in Laravel!).<br/>
  I can fetch and read all other columns as what they are but ID column which is UUID type comes as 0 OR 0 OR 5 or just any other single numbers however the real ID can be <code>1367dc99-ee67-4f0f-b0eb-c2215831d7db</code>.<br/>
  Frankly, I have no idea what is wrong either with the method I used in the Laravel or in Vue JS axios.<br/><br/>
  Is there any specific technique that I should use to read UUIDs from backend to frontend? <strong>Please help me with this.</strong><br/><br/>
  I attached codes from Laravel and Vue JS Axios down below. If there is anything missing in my question please let me know.</p>
  <p><strong>Laravel Code</strong></p>
  <pre><code>$notifications = Notifications::where('notifiable_id', auth()-&gt;user()-&gt;id)-&gt;orderBy('created_at', 'DESC')-&gt;get();
  
  return response()-&gt;json(
  [
     &quot;notifications&quot; =&gt; $notifications
  ]
  </code></pre>
  <p><strong>Vue JS Axios GET Method</strong></p>
  <pre><code>data () {
     return {
        loading: false,
        unreadNotifications: []
     }
  },
  methods: {
    async Notifications () {
      this.loading = true
      await axios.get('/user/notifications/unreads')
          .then((response) =&gt; {
              this.unreadNotifications = response.data
          })
          .finally (() =&gt; {
              this.loading = false
          })
    }
  }
  </code></pre>
  <p><strong>the output is [ 0, 5 ]</strong></p>