V - slot, can't style or access it

I add the v-flip on my nuxt webpage. So my template looks like this:

<div class="about__cards">
 <vue-flip class="about__single-card" active-click width = "350px" height="450px">
    <template v-slot:front>
        <p class="about__title">Stacks</p>
      </template>

      <template v-slot:back>
        <h4>My stacks</h4>
        <ul>
          <li>Javascript</li>
          <li>Css</li>
          <li>HTML</li>
          <li>Vue</li>
          <li>Nuxt</li>
        </ul>
      </template>
    </vue-flip>
...

This was my styling:

.about__cards{
  display:flex;
  justify-content: space-evenly;
  /* background-color: transparent; */
}
.about__single-card{
  border:1px red solid;
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 5px 18px rgba(0, 0, 0, 0.6);
  cursor: pointer;
  transition: 0.5s;
  position: relative;
  text-align: center;
  transition: transform 0.6s;
  transform-style: preserve-3d;
}

.front{
  background: red;
  width: 100%;
  height: 100%;
  /* line-height: 448px; */
  text-align: center;
  vertical-align: middle;
 /*  display: flex;
  flex-direction: column;
  align-content: flex-end; */
}

I put front because when inspecting the element I saw that was given that class. All all seems working. Then I realized that I haven't scoped the style so was messing with other pages. I did, restart the server and now it's not working anymore the styling of the v-slot. But If I go to inspect the element and I go to the "front"class that was pre-given I can change it there... I read that you can style v-slots, but before I did it so I am kind of confused. What I am missing here? Thank you

It's because scoped styles are "scoped" by using component unique id as part of the selector.

If you inspect your app, you will see things like this (1d328d7a is the uid)

<div
  data-v-1d328d7a=""
  class="field-input-wrapper"
...

.field-input-wrapper[data-v-1d328d7a] {
  ...

In order to bypass this, you can use deep selector like this

.about__single-card >>> .front{
  background: red;
  width: 100%;
  height: 100%;
  text-align: center;
  vertical-align: middle;
}