I have a laravel 8 project which is recently upgraded from version 7. I have updated webpack and package.json etc..

Here is a barebone structure of my Vue template which is supposed to display documents datatable(For now I am just dumping data). The data fetched from axios endpoint is correctly displayed in console log but is not available in template. I have tried debugging everyway, data initialized from axios is not even available in mounted() function also.

Below is my code

<template>
  <div>
    <!-- Add section to display fetched data and dummy data -->
    <div class="fetched-data">
      <h3>Fetched Media Data</h3>
      <pre>{{ fetchedMediaData }}</pre>
    </div>
    <div class="dummy-data">
      <h3>Dummy Media Data</h3>
      <pre>{{ dummyMediaData }}</pre>
    </div>
  </div>
</template>

<script>
import axios from 'axios';

export default {
  data() {
    return {
      dummyMediaData: [],
      fetchedMediaData: [],
      tableIsLoading: false,
    };
  },
  created() {
    this.fetchMediaData();
  },
  methods: {
    fetchMediaData() {
      this.tableIsLoading = true;
      axios.get(route('api.media.all-vue'))
          .then((response) => {
            this.tableIsLoading = false;
            if (response.data && response.data.data) {
              this.fetchedMediaData = response.data.data;

              // Initialize dummy data inside axios
              this.dummyMediaData = [
                {
                  id: 1,
                  filename: 'Document 1',
                  created_by: 'User 1',
                  extension: 'pdf',
                  filesize: '1 MB',
                  created_at: '2023-01-01',
                  is_folder: false,
                  document_icon: 'fa-file-pdf-o',
                  path: '/path/to/document1.pdf',
                  ownerEdit: true,
                  ownerDelete: true,
                },
                {
                  id: 2,
                  filename: 'Document 2',
                  created_by: 'User 2',
                  extension: 'docx',
                  filesize: '2 MB',
                  created_at: '2023-01-02',
                  is_folder: false,
                  document_icon: 'fa-file-word-o',
                  path: '/path/to/document2.docx',
                  ownerEdit: true,
                  ownerDelete: true,
                },
                {
                  id: 3,
                  filename: 'Folder 1',
                  created_by: 'User 3',
                  extension: '',
                  filesize: '',
                  created_at: '2023-01-03',
                  is_folder: true,
                  document_icon: '',
                  path: '',
                  ownerEdit: true,
                  ownerDelete: true,
                },
              ];

              // Log both fetched data and dummy data to console
              console.log('Fetched media data:', this.fetchedMediaData);
              console.log('Dummy Media Data:', this.dummyMediaData);
            } else {
              console.error('Unexpected API response format:', response.data);
            }
          })
          .catch((error) => {
            console.error('Failed to fetch media data:', error);
            this.tableIsLoading = false;
          });
    },
  },
};
</script>

I have checked dummy data to be initialized in mounted() function this displays data in template but data initialized via axios end point is not available in mounted() function. This was working fine before the laravel upgrade to 8. Is there something I am missing here.
Please advise.