Компонент Flip Card в VueJs 3

Я хочу получить компонент флип-карты, подобный тому, что здесь, разработав общий компонент Vue, но я не понимаю, как я могу назначить весь лицевой компонент (передний / задний) в качестве задней или лицевой стороны карты. , и как я могу заблокировать свойство перелистывания (как вариант), пример лица (спереди/сзади):

<div id = "planflex" :style = "style">
    <div class = "block">
            <h2> {{ action_id }} </h2>
    </div>
    <div class = "block">
        <img 
        :src = "require(`../assets/legos/2x${size}${color}.png`)" 
        alt = "legos" 
        id = "lego">
    </div>
    <div class = "block " :id = "action_id" @click = "choose()">
        <h3> {{ actor }} </h3>
    </div>
</div>

Не могли бы вы рассказать мне, как я могу добиться этого правильно? заранее спасибо.

Компонент FlipCard.vue Vue, который я пытался разработать:

<template>
    <div id = "flashcard" class = "container" @dblclick = "toggleCard()">
  
      <transition name = "flip">
        <div v-bind:key = "flipped" class = "card">
            {{ flipped ? back : front }}
        </div>
      </transition>  
  </div>
</template>

<script>
  export default {
      name: "FlipCard",
      props: {
          front: {
              type: Object,
              required: true
          },
          back: {
              type: Object,
              required: true
          },
          flipped: {
              type: Boolean,
              default: false,
          },
      },
      methods: {
          toggleCard() {
              this.flipped = !this.flipped;
          },
      }
  }
</script>

Стиль.css

<style>
body {
    font-family: 'Montserrat', sans-serif;
    text-align: center;
  }
  
  ul {
    padding-left: 0;
    display: flex;
    flex-flow: row wrap;
  }
  
  li {
    list-style-type: none;
    padding: 10px 10px;
    transition: all 0.3s ease;
  }
  
  .container {
    max-width: 100%;
    padding: 2em;
  }
  
  .card {
    display: block;
    width: 150px;
    height: 175px;
    padding: 80px 50px;
    background-color: #51aae5;
    border-radius: 7px;
    margin: 5px;
    text-align: center;
    line-height: 27px;
    cursor: pointer;
    position: relative;
    color: #fff;
    font-weight: 600;
    font-size: 20px;
    -webkit-box-shadow: 9px 10px 22px -8px rgba(209,193,209,.5);
    -moz-box-shadow: 9px 10px 22px -8px rgba(209,193,209,.5);
    box-shadow: 9px 10px 22px -8px rgba(209,193,209,.5);
    will-change: transform;
  }
  
  li:hover{
    transform: scale(1.1);
  }
  
  li:nth-child(-n+3) .card{
    background-color: #e65f51;
    }
  
  li:nth-child(2n+1) .card{
    background-color: #a17de9;
    }
  
  li:nth-child(4n) .card{
    background-color: #feca34;
    }
  
  li:nth-child(5n-2) .card{
    background-color: #51aae5;
    }
  
  li:nth-child(4n+4) .card{
    background-color: #feca34;
    }
  
  li:nth-child(-7n+7) .card{
    background-color: #e46055;
    }
  
  .delete-card {
    position: absolute;
    right: 0;
    top: 0;
    padding: 10px 15px;
    opacity: .4;
    transition: all 0.5s ease;
  }
  
  .delete-card:hover, .error {
    opacity: 1;
    transform: rotate(360deg);
  }
  
  .flip-enter-active {
    transition: all 0.4s ease;
  }
  
  .flip-leave-active {
    display: none;
  }
  
  .flip-enter, .flip-leave {
    transform: rotateY(180deg);
    opacity: 0;
  
  }
</style>