Optimal use of VUE.js?

Question

Vue.js

Welcome all!
I started to understand a little about vuejs and quasar to make a simple application, but after I compiled it, the application catches great friezes in android studio and on the phone, as if very heavy. No need to go far, it's either in my vue.js code, or because of the quasar configuration curve.
And that's why I would like to hear criticism of my vuejs code, maybe because of its wild curvature, I have friezes on the application.
Here is my routing and connection of components:

export default [
  {
    path: '/',
    component: () => import('layouts/default'),
    children: [
      { 
        path: '', name: 'index', component: () => import('pages/index')
      },
      { 
        path: '/info', name: 'info', component: () => import('pages/info')
      },,
      { 
        path: '/cars', name: 'cars', component: () => import('pages/cars')
      },
      { 
        path: '/cars/:id', name: 'detail', component: () => import('pages/detail-car')
      },
      { 
        path: '/test', name: 'test', component: () => import('pages/test')
      }
    ]
  },

  { // Always leave this as last one
    path: '*',
    component: () => import('pages/404')
  }
]

Next, I will give the component page, for example /cars, here I will show it without the template itself, there I simply display the data:

import axios from 'axios';
import { Cookies } from 'quasar';
import { Loading } from 'quasar';

export default {
  name: 'CarsList',
  data () {
    return {
      selectOptionsWeight: [
        {
          label: 'Любой',
          value: 0
        },
        {
          label: 'до 1 тонны',
          value: '1'
        },
        {
          label: 'От 1т до 1.5т',
          value: '1.5'
        },
        {
          label: 'От 1.5т до 3т',
          value: '3'
        }
      ],
      selectOptionsVolume: [
        {
          label: 'Любой',
          value: 0
        },
        {
          label: 'до 10 м3',
          value: '10'
        },
        {
          label: 'От 10м3 до 15м3',
          value: '15'
        },
        {
          label: 'От 15м3 до 30м3',
          value: '30'
        }
      ],
      formFilterWeight: 0,
      formFilterVolume: 0,
      formFilterRadius: 50,
      openedModal: false,
      queryText: '',
      getListCars: '',
      lat: Cookies.get('user_lat'),
      lng: Cookies.get('user_lng'),
      cars: [],
      showAlertEmpty: false,
      titleApp: 'Поиск машины'
    }
  },
  methods: {
    goToDetailPage: function (id) {
      this.$router.push('/cars/' + id);
    },
    selectFilterChange: function (data) {
      console.log(data)
    },
    saveModalFilter: function () {
      // to do save
      this.openedModal = this.openedModal ? false : true; 
    },
    openModal: function (e) { 
      this.openedModal = this.openedModal ? false : true; 
      // VueGoogleMaps.Map.methods.resize();
      // google.maps.event.trigger(this.$mapObject, 'resize');
    },
    noticeError: function (event) {      
      this.$q.notify('Message'); 
    },
    templatePhone: (phone) => {
      if (phone.length == 11) { 
          var s = '+'+phone.substr(0, 1)+' ('+phone.substr(1, 3)+') '+phone.substr(4, 3)+'-'+phone.substr(7, 2)+'-'+phone.substr(9, 2);
          return s;
      } else {
          return phone;
      }
    },
    calcDistance: function (lat1, lng1, lat2, lng2) { 
      //радиус Земли
      var $R = 6372795;

      lat1 *= Math.PI / 180;
      lat2 *= Math.PI / 180;
      lng1 *= Math.PI / 180;
      lng2 *= Math.PI / 180;
      var $cl1 = Math.cos(lat1);
      var $cl2 = Math.cos(lat2);
      var $sl1 = Math.sin(lat1);
      var $sl2 = Math.sin(lat2);
      var $delta = lng2 - lng1;
      var $cdelta = Math.cos($delta);
      var $sdelta = Math.sin($delta);
      var $y = Math.sqrt(Math.pow($cl2 * $sdelta, 2) + Math.pow($cl1 * $sl2 - $sl1 * $cl2 * $cdelta, 2));
      var $x = $sl1 * $sl2 + $cl1 * $cl2 * $cdelta;
      var $ad = Math.atan2($y, $x);
      var $dist = $ad * $R;

      //расстояние между двумя координатами в метрах
      return $dist; 
    },
    saveModalFilter: function () { 

      let
      weight = this.formFilterWeight > 0 ? this.formFilterWeight : '',
      volume = this.formFilterVolume > 0 ? this.formFilterVolume : ''; 

      axios.get(`https://api.sbl.su/taxi/list`, {params: {
        weightEnd: weight,
        volumeEnd: volume
      }})
      .then(response=> { 
        let data = JSON.parse(response.request.response);
        this.cars = data.result.filter( item => ((this.calcDistance(item.trackLat, item.trackLng, this.lat, this.lng))* 0.001).toFixed(0) < this.formFilterRadius ); 

        // hide modal
        this.openedModal = false; 

        // alert if empty
        this.showAlertEmpty = this.cars.length == 0 ? true : false; 

      }).catch(e=>{
        console.log(e);
      });
    }
  },
  mounted(){

      // устанавливаем заголовки в тулбар
      let title = document.getElementById('title-toolbar');
      let subTitle = document.getElementById('sub-title-toolbar');
      title.textContent = 'Найти машину';
      subTitle.textContent = 'Грузовое такси';  

      this.$axios.get(`тут запрос к апи`)
      .then(response=> { 
        let data = JSON.parse(response.request.response);
        this.cars = data.result.filter( item => ((this.calcDistance(item.trackLat, item.trackLng, this.lat, this.lng))* 0.001).toFixed(0) < this.formFilterRadius );

        // alert if empty
        this.showAlertEmpty = this.cars.length == 0 ? true : false;

      }).catch(e=>{
        console.log(e);
      });
  }
}

1) Quasar is not that important, I'm interested in vuejs, it's super crooked? Maybe friezes due to incorrect use of vuejs methods?
2) Well, the suspicion of lags due to quasar, it is possible that there are many connected components (if anyone understands), can this be so? Show my config:

config

module.exports = function (ctx) {
  return {
    // app plugins (/src/plugins)
    plugins: [
      'axios'
    ],
    css: [
      'app.styl'
    ],
    extras: [
      ctx.theme.mat ? 'roboto-font' : null,
      'material-icons'
      // 'ionicons',
      // 'mdi',
      // 'fontawesome'
    ],
    supportIE: true,
    vendor: {
      add: [],
      remove: []
    },
    build: {
      scopeHoisting: true,
      vueRouterMode: 'history',
      // gzip: true,
      // analyze: true,
      // extractCSS: false,
      // useNotifier: false,
      extendWebpack (cfg) {
      }
    },
    devServer: {
      // https: true,
      // port: 8080,
      open: true // opens browser window automatically
    },
    // framework: 'all' --- includes everything; for dev only!
    framework: {
      components: [ 
        'QSelect',
        'QAutocomplete',
        'QLayout',
        'QLayoutHeader',
        'QLayoutDrawer',
        'QPageContainer',
        'QPage',
        'QToolbar',
        'QToolbarTitle',
        'QInput',
        'QBtn',
        'QIcon',
        'QList',
        'QListHeader',
        'QItem',
        'QItemTile',
        'QItemMain',
        'QItemSide',
        'QModal',
        'QCard',
        'QCardTitle',
        'QCardMain',
        'QCardMedia',
        'QCardSeparator',
        'QCardActions',
        'QChip',
        'QAlert',
        'QParallax',
        'QSlider'
      ],
      directives: [
        'Ripple',
        'CloseOverlay',
        'TouchSwipe'
      ],
      // Quasar plugins
      plugins: [
        'Notify',
        'Loading'
      ]
    },
    // animations: 'all' --- includes all animations
    animations: [
      'fadeIn',
      'fadeOut'
    ],
    pwa: {
      cacheExt: 'js,html,css,ttf,eot,otf,woff,woff2,json,svg,gif,jpg,jpeg,png,wav,ogg,webm,flac,aac,mp4,mp3',
      manifest: {
        // name: 'Quasar App',
        // short_name: 'Quasar-PWA',
        // description: 'Best PWA App in town!',
        display: 'standalone',
        orientation: 'portrait',
        background_color: '#ffffff',
        theme_color: '#027be3',
        icons: [
          {
            'src': 'statics/icons/icon-128x128.png',
            'sizes': '128x128',
            'type': 'image/png'
          },
          {
            'src': 'statics/icons/icon-192x192.png',
            'sizes': '192x192',
            'type': 'image/png'
          },
          {
            'src': 'statics/icons/icon-256x256.png',
            'sizes': '256x256',
            'type': 'image/png'
          },
          {
            'src': 'statics/icons/icon-384x384.png',
            'sizes': '384x384',
            'type': 'image/png'
          },
          {
            'src': 'statics/icons/icon-512x512.png',
            'sizes': '512x512',
            'type': 'image/png'
          }
        ]
      }
    },
    cordova: {
      // id: 'org.cordova.quasar.app'
    },
    electron: {
      extendWebpack (cfg) {
        // do something with cfg
      },
      packager: {
        // OS X / Mac App Store
        // appBundleId: '',
        // appCategoryType: '',
        // osxSign: '',
        // protocol: 'myapp://path',

        // Window only
        // win32metadata: { ... }
      }
    },

    // leave this here for Quasar CLI
    starterKit: '1.0.2'
  }
}

Thanks to everyone who mastered, criticism is needed)

Answer 1

`component: () => import('pages/index')` - it's called lazy loading, right?
If so, then here is the possible reason for the brakes.
and so - I personally did not see anything so special in the code. and the methods - they are small and simple - what can be slowed down there.