Unhandled error during execution of scheduler flush

[ledtorch]

[Vue warn]: Unhandled error during execution of scheduler flush. This is likely a Vue internals bug. Please open an issue at https://github.com/vuejs/core . 
"
"
" at <Detail"
"onVnodeUnmounted=fn<onVnodeUnmounted>"
"ref=Ref<"
undefined
">"
">"
"
"
" at <RouterView>"
"
"
" at <App>"

[Vue warn]: Unhandled error during execution of render function 
"
"
" at <Detail"
"onVnodeUnmounted=fn<onVnodeUnmounted>"
"ref=Ref<"
undefined
">"
">"
"
"
" at <RouterView>"
"
"
" at <App>"

I'm working on resolving the undefined data fetching from local JSON file.
Originally, the error was:
Unhandled Promise Rejection: TypeError: undefined is not an object (evaluating 'this.data?.storefront.day')

My code:

export default {
  components: { Home, DetailHome, Share, LeftArrow, RightArrow, TagShopType, Review, Businesshour, Address },
  data() {
    return {
      storeTitle: '',
      description: '',
      storeType: '',
      // The data from the JSON file
      data: '',
      currentPage: 0,
    }
  },

...

async created() {
    // Fetch url title and decode it
    const urlTitle = decodeURIComponent(this.$route.params.title);

    // Define root: https://root.com
    const rootURL = `${window.location.protocol}//${window.location.host}`;

    const response = await fetch(`${rootURL}/stores.json`);
    const stores = await response.json();
    console.log("Fetched JSON data: ", stores);

    // Find the store matching the title from the URL
    const storeData = stores.features.find(store => store.properties.title === urlTitle);
    console.log("The storeData: ", storeData);

    this.data = storeData.properties;
    this.storeTitle = this.data.title;
    this.description = this.data.description;
    this.storeType = this.data.type;
  },

  computed: {
		frontStoreImage() {
      return this.rootUrl(this.data?.storefront.day);
    },

...

// Tried 1
// It is necessary to add this conditional expression for each data point, which means more than 10 fn'.
frontStoreImage() {
      // Fallback to an empty string if data is not available
      return this.data?.storefront ? this.rootUrl(this.data.storefront.day) : '';

    },
...

// Tried 2
// I feel this approach is redundant and makes the data complicated.
data() {
  return {
    storeTitle: '',
    description: '',
    storeType: '',
    currentPage: 0,
    data: {
      title: '',
      description: '',
      type: '',
      storefront: {
        day: '',
        night: ''
      },
      item1: { image: '', name: '', description: '', price: '' },
      item2: { image: '', name: '', description: '', price: '' },
      item3: { image: '', name: '', description: '', price: '' },
      item4: { image: '', name: '', description: '', price: '' },
      item5: { image: '', name: '', description: '', price: '' },
      businesshour: [],
      address: '',
      // ... any other properties you expect
    }
  };
},

Then I used:

    frontStoreImage() {
      // Defaults to an empty string before the app renders without data 
      const storeFrontDayData = this.data?.storefront?.day || '';
      return this.rootUrl(storeFrontDayData);
    },

Then I can render the whole data correctly even the new error exists:
TypeError: undefined is not an object (evaluating 'this.data?.item1.image')

---

And I noticed the Safari browser reported the Vue warn and asks me to open an issue.

Thanks all

P.S. My repo: https://github.com/ledtorch/Map/tree/main/app