Vue - App.vue example with vuex

Question

<template>
  <div id="app">
    <div v-if="type === 'Not-Authorized'">
      <AccessDeniedContent/>
    </div>

    <div v-else-if="propertyData">
      <HeaderMain/>
      <router-view></router-view>
    </div>

    <vue-progress-bar></vue-progress-bar>
  </div>
</template>

<script>
import BodyContent from './components/BodyContent';
import AccessDeniedContent from './components/access-denied/AccessDeniedContent';
import HeaderMain from './components/HeaderMain';
import { mapMutations, mapState, mapGetters } from 'vuex';
import Papa from 'papaparse';

export default {
  components: {
    AccessDeniedContent,
    BodyContent,
    HeaderMain,
  },
  data() {
    return { type: null };
  },
  methods: {
    ...mapMutations([
      'setPropertyData',
      'setUid',
      'setPid',
      'setAct',
      'setListOfUnits',
      'setUnit',
    ]),
    handlePropertyData(propertyData) {
      const filesToArray = propertyDataKey => {
        if (
          !propertyData[propertyDataKey] ||
          !propertyData[propertyDataKey].trim()
        )
          return [];
        return propertyData[propertyDataKey].split(',').map(img => {
          return img.trim();
        });
      };
      propertyData = propertyData[0];
      propertyData['images'] = filesToArray('images');
      propertyData['documents'] = filesToArray('documents');

      return propertyData;
    },
    setUnitForFunding() {
      // set unit for funding
      // if (
      //   this.actionType === 'fund' &&
      //   this.listOfUnits &&
      //   this.listOfUnits.length > 0 &&
      //   typeof this.listOfUnits[0].Nid !== 'undefined'
      // ) {
      //   this.setUnit(this.listOfUnits[0].Nid);
      // }
    },
  },
  computed: {
    ...mapState(['pid', 'uid','act','propertyData', 'listOfUnits']),
    ...mapGetters(['actionType']),
  },
  async beforeMount() {
    // set data from url param
    const { uid, nid, act } = this.parsedUrlQuery;

    this.setUid(uid);
    this.setPid(nid);
    this.setAct(act);

    // get original propertyData
    (async () => {
      const { data } = await this.axios.get(
        `${mainSiteUrl}/api/views/property_services?display_id=property_single&filters[nid]=${
          this.pid
        }`
      );
      let propertyData = this.handlePropertyData(data);
      this.setPropertyData(propertyData);

      // if not buyable or fundable
      // redirect to properties
      this.$nextTick().then(() => {
        if (!this.actionType)
          return (window.location.href = `${mainSiteUrl}/properties`);
      });

      // get values for chart from CSV
      const { property_growth_report } = propertyData;
      if (property_growth_report)
        Papa.parse(
          `${mainSiteUrl}/api/csv-proxy?src=${property_growth_report}`,
          {
            download: true,
            complete: results => {
              const { data } = results;
              // save into propertyData
              this.setPropertyData({
                ...this.propertyData,
                property_growth_report_data: data,
              });
            },
          }
        );
    })();

    // get list of units
    (async () => {
      function getUrlParam() {
          let params = {};
          let parts = window.location.href.replace(/[?&]+([^=&]+)=([^&]*)/gi, function(m,key,value) {
              params[key] = value;
          });
          return params;
      }

      let status = null

      if(this.act == 'buy') {
        status = 1;
        // alert(`action ${actParam} is here`);
      } else if(this.act == 'fund') {
        status = 2;
      }

      let apiUrl = `${mainSiteUrl}/api/property-units.json?property_nid=${this.pid}`;
      if(status) apiUrl += `&status=${status}`;

      const { data } = await this.axios.get(apiUrl);
      this.setListOfUnits(data);
    })();

    // get unit from url after login redirection
    if (this.$route.query.hasOwnProperty('unit') && this.$route.query.unit)
      this.setUnit(this.$route.query.unit);
  },
  mounted() {
    // initial loading animation
    this.$Progress.start();
  },
  watch: {
    propertyData: {
      immediate: true,
      handler(v) {
        // initial loading animation
        if (v) this.$Progress.finish();

        //this.setUnitForFunding();
      },
    },
    listOfUnits: {
      immediate: true,
      handler(_) {
        //this.setUnitForFunding();
      },
    },
  },
};
</script>