How to organize detail page in catalog with SPA + VueRouter + Vuex?

Question

Vue.js

There is a page with a catalog, all data for an element is taken from an array.
There are routes for detailed and catalog. For a detailed route, I have a dynamic one.
When clicking on an element - I save the current element in the store vuex and follow the route to the detailed one along the dynamic path.
The problems are as follows: 1) After going to the detailed page - if you update, then an error occurs, because in the store - the current element is not recorded.
2) If you manually enter the route in the browser line, then it will not go to the element I need.
3) If I set the default current element (so that there is no error on the first paragraph), then styles are not applied to the page for some reason.
Tell me how to properly organize the routing of the directory + the detailed element of the directory so that everything works correctly?

const meatFood = [
  {
    title: 'Говядина тушеная',
    value: 'cow',
    imgDetail: '/img/catalog/cow.png',
    weight: 10,
    cow: true,
    pig: false,
    bird: false,
  },
  {
    title: 'Говядина вареная',
    value: 'krot',
    imgDetail: '/img/catalog/cow.png',
    weight: 300,
    cow: true,
    pig: false,
  },
const store = new Vuex.Store({
    state:{ 
        meatFood: meatFood,
        currentFood: meatFood[0]
    },
    mutations:{
        setCurrentFood(state, food){
            state.currentFood = food;
            console.log('state.currentFood: ', state.currentFood);
        }
        
    }
});

const router = new VueRouter({
  mode: 'history',
  routes:[
      {
          path: '/',
          name: 'main',
          component: MainPage
      },
      {   
          path: '/catalog',
          name: 'catalog',
          component: Catalog
      },
      {   
          path: '/catalog/:code',
          name: 'detail',
          component: Detail
      },
      {   
          path: '*',
          name: 'notFound',
          component: MainPage
      }
  ]
})

and here I hang vue-router, just below the method

<router-link :to="{name: 'detail', params: {code: food.value}}">
            <div @click="setCurrentFood(food)" class="box-food">
                <p>{{food.title}}</p>
            </div>
          </router-link>
  data(){
    return{
      meatFood: this.$store.state.meatFood
    }
  },
  methods: {
    setCurrentFood(food){
      this.$store.commit('setCurrentFood', food);
    }
  },

Answer 1

On element click - I store the current element in store vuex and follow the route...

That's the root of your problems. You don't need to save anything on click. Just move on. And the component that displays detailed information - let it figure out what and how. Receives as a parameter the identifier of the object that should be displayed, and requests the necessary data. Well, watch on the identifier - so that when it changes, the data is also updated.
UPD. If all the data on the client already exists, then nothing is needed at all, except for one calculated property in Detail, where the search for the desired object will be performed by id (or whatever you have).