몇일동안 고생해서 작업했지만
생각한것을 구현하지는 못했다.
<template>
  <div>
    <div>
      <h1>매일 먹는거</h1>
      <swiper
        
        class="swiper"
        :modules="modules"
        :space-between="10"
        :slides-per-view="3"
        :free-mode="true"
        :pagination="{ clickable: true }"
      >
        <swiper-slide
          v-for="(food,index) in foodList"
          :key="index"
          class="slide"
        >
          <div
            :key="index"
            :class="{'active' :isActive === index}"
            @click="addToCart(food,index)"
          >
            {{ index }}
            <!-- <img :src="food.image"> -->
            <div>
              <span>
                {{ food.name }}       
              </span>
            </div>        
          </div>
        </swiper-slide>
      </swiper>
    </div>
    <h1>자주 먹는거</h1>
    <h1>가끔 먹는거</h1>
    <h1>애들 먹는거</h1>
  </div>
</template>

<script>
import { defineComponent } from 'vue'
import {mapState} from 'vuex';
import { Pagination,FreeMode } from 'swiper'
import { Swiper, SwiperSlide } from 'vue-awesome-swiper'

// import swiper module styles
import 'swiper/css'
import 'swiper/css/pagination'
import 'swiper/css/free-mode'
// more module style...

export default defineComponent({    
    name: 'SwiperExampleFreeMode',
    title: 'Free mode / no fixed positions',
    url: import.meta.url,    
    components: {
      Swiper,
      SwiperSlide
    },
    setup() {
      return {
        modules: [Pagination, FreeMode]
      }
    },
   data(){
     return {
       isActive:null

     }
   },

  computed:{
      ...mapState('foodListModule',["foodList"])
  },
  created(){
    this.$store.dispatch("foodListModule/setFoodList");
  },  
  methods:{
    addToCart(food,index) {
      this.$store.dispatch("foodListModule/addToCart", food);
      if(this.isActive === index){
          this.isActive = null;
        }else{
          this.isActive = index;
        }
    },  
  },    
  })
</script>
<style lang="scss" scoped>
  @import '@/styles/init.scss';
  @import './style.scss';

  .swiper {
    @include swiper-wrapper();
  }

  .slide {
    @include swiper-slide();
  }

  .active {border:solid 3px red}
</style>