Issue with Dependency cycle via in Vue.js

I'm having an issue with a linting error in a vue.js project. The error that I get looks like this:

/Users/mikecuddy/Desktop/coding/data_science_projects/statues/client/src/store/modules/common.js
   4:1  error    Dependency cycle via @/store/index:4  import/no-cycle

I have no idea how to get rid of this error. I tried renaming files, using this.$router and this.$store with no luck. Here is some of my code:

router -> index.js: The data path is the main one I want to get to. Notice that I have the store import files commented out - that does get rid of the dependency error but then I have issues with doing something like:

this.$store.state.common.loginFlag

as opposed as importing the store and doing this:

store.state.common.loginFlag

import Vue from 'vue';
import VueRouter from 'vue-router';
// import store from '../store/index.js';
// import store from '@/store/index';
import Home from '../views/Home.vue';

Vue.use(VueRouter);

const routes = [
  {
    path: '/data',
    name: 'Data',
    component: () => import('../views/Data.vue'),
    beforeEnter: (to, from, next) => {
      if (this.$store.state.common.loginFlag === false) {
        next('/login');
      } else {
        next();
      }
    },
    beforeRouteLeave: (to, from, next) => {
      if (this.$store.state.common.loginFlag === false) {
        next('/login');
      } else {
        next();
      }
    },
  },
];

const router = new VueRouter({
  routes,
});

export default router;

store/modules/common.js:

import Vue from 'vue';
import Vuex from 'vuex';
import axios from 'axios';
import router from '../../router';

Vue.use(Vuex);

const data = {
  userNotFound: false,
  passwordNoMatch: false,
  loginFlag: false,
};

const getters = {
  userNotFound: (state) => state.userNotFound,
  passwordNoMatch: (state) => state.passwordNoMatch,
  loginFlag: (state) => state.loginFlag,
};

const actions = {

  login: ({ commit }, { payload }) => {
    const path = 'http://localhost:5000/login';
    axios.post(path, payload)
      .then((res) => {
        if (res.data.login_flag) {
          commit('session/setUserObject', res.data.user, { root: true });
          commit('setLoginFlag', res.data.login_flag);
          // Tried this:
          router.push{ name: 'Data' }
          // As well as trying this: 
          this.$router.push({ name: 'Data' });
        }
        commit('setNoPasswordMatch', res.data.Password_no_match);
        commit('setUserNotFound', res.data.Not_found);
      })
      .catch((error) => {
        console.log(error);
      });
  },

};

// I have mutations but did not think they'd be needed 
const mutations = {};

export default {
  namespaced: true,
  state: data,
  getters,
  actions,
  mutations,
};

In the common.js file I've tried commenting out:

import router from '../../router';

and that seemed to work - got the Dependency cycle error to go away and in the router/index.js file I was able to get to the route but had an issue with this.$store.state.common.loginFlag when I commented out import store from '@/store/index'; If I leave in the import of: import store from '@/store/index'; then I get the dependency cycle error.

I've also found some help at these other stack pages:

TypeError: Cannot read properties of undefined (reading '$router') vuejs

dependency cycle detected import/no-cycle

I will say that I hate using linters and that's what's giving me the problem here.

Here is the code for store/index.js:

import Vue from 'vue';
import Vuex from 'vuex';
import common from './modules/common';
import session from './modules/session';

Vue.use(Vuex);

export default new Vuex.Store({
  modules: {
    common,
    session,
  },
});