@metalsadman @dobbel thanks

@dobbel i have already looked into that post it explains how to use store in “index.js” file and not in “routes.js” file which gets imported into index.js file

I have a typical routes.js file like this and i cannot access the store.even i am able to dispatch an action for the store by accessing store given below but still store state is not updated?Why? Thus instead of doing this way i removed routes.js file and then in index.js i was able to update store.

import store from '../store';
import {userPortfolio} from '../dummy';

const routes = [{
    path: '/',
    component: () => import('layouts/MainLayout.vue'),
    children: [{
        name: 'Home',
        path: '',
        component: () => import('pages/Home.vue')
      },
      {
        name: 'Devices',
        path: 'devices',
        component: () => import('pages/Devices.vue')
      },
      {
        name: 'FirmwaresOverview',
        path: 'firmwaresOverview',
        component: () => import('pages/FirmwaresOverview.vue')
      },
      {
        name: 'Firmwares',
        path: 'firmware/:id',
        props: true,
        component: () => import('pages/Firmware.vue')
      },
      {
        name: 'Feedback',
        path: 'feedback',
        component: () => import('pages/Feedback.vue')
      }
    ],
    beforeEnter(to,from,next){
      // Make Api Call and populate store:
      // Apicall.then(data=>{
      //   store().dispatch("common/initializeData",data)
      // })

      // Dummy data
      store().dispatch("common/initializeData",userPortfolio);
      next();
    }
  },

  // Always leave this as last one,
  // but you can also remove it
  {
    path: '*',
    component: () => import('pages/Error404.vue')
  }
]


export default routes

Improvised index.js file :

import Vue from 'vue'
import VueRouter from 'vue-router'
import {userPortfolio} from '../dummy';

// import routes from './routes'

const defaultPush = VueRouter.prototype.push;
VueRouter.prototype.push = function push(location) {
  return defaultPush.call(this, location).catch(err => err)
};



Vue.use(VueRouter)

/*
 * If not building with SSR mode, you can
 * directly export the Router instantiation;
 *
 * The function below can be async too; either use
 * async/await or return a Promise which resolves
 * with the Router instance.
 */

export default function ( { store } ) {
  const Router = new VueRouter({
    scrollBehavior: () => ({ x: 0, y: 0 }),
    routes:[{
      path: '/',
      component: () => import('layouts/MainLayout.vue'),
      children: [{
          name: 'Home',
          path: '',
          component: () => import('pages/Home.vue')
        },
        {
          name: 'Devices',
          path: 'devices',
          component: () => import('pages/Devices.vue')
        },
        {
          name: 'FirmwaresOverview',
          path: 'firmwaresOverview',
          component: () => import('pages/FirmwaresOverview.vue')
        },
        {
          name: 'Firmwares',
          path: 'firmware/:id',
          props: true,
          component: () => import('pages/Firmware.vue')
        },
        {
          name: 'Feedback',
          path: 'feedback',
          component: () => import('pages/Feedback.vue')
        }
      ],
      beforeEnter(to,from,next){
        // Make Api Call and populate store:
        // Apicall.then(data=>{
        //   store().dispatch("common/initializeData",data)
        // })
  
        // Dummy data
        store.dispatch("common/initializeData",userPortfolio);
        next();
      }
    },
  
    // Always leave this as last one,
    // but you can also remove it
    {
      path: '*',
      component: () => import('pages/Error404.vue')
    }
  ],

    // Leave these as they are and change in quasar.conf.js instead!
    // quasar.conf.js -> build -> vueRouterMode
    // quasar.conf.js -> build -> publicPath
    mode: process.env.VUE_ROUTER_MODE,
    base: process.env.VUE_ROUTER_BASE
  })

  return Router
}

thanks @s-molinari and @tof06

@s-molinari we can acheive the same by specifying dropdown-icon=" " as a prop but the actual problem is how to get rid of the space occupied by it, the space is still there .Actually i am trying to center the label on the button

@metalsadman after too much trouble i was finally able make it work BUT for only response error like 429 which was specific to a third party news api on the other hand i am using firebase auth (REST) to authenticate user if a user puts a invalid password then an error response is sent back by firebase and i am trying to catch that here in the interceptor ( error like 420 ) but its still not getting caught by the interceptor is this problem specific to firebase or what?

i have the following code

import Vue from 'vue'
import axios from 'axios'
import {Notify} from 'quasar'

const instance=axios.create({
  baseURL:"http://newsapi.org/v2",
  params:{
    apiKey:"//someKey"
  }
});

instance.interceptors.response.use((config)=>config,error=>{
  
  if(error.response.status==400)
  Notify.create({
    type:"negative",
    message:"Hello there!"
  });
  
});

Vue.prototype.$axios = instance;

I dont know why but the interceptor is not even triggered on any response i checked this by logging text to console in first as well as in second parameter’s body.