How to make styles work?

Question

css

Hi, I have a problem that I can't figure out on my own, so I hope you can help! I apologize in advance that this is the only code.
So I have layout:

.choicePrice(v-for="item in getCheckouts")
  p {{item.text + ' ' + item.price}}
.priceOne
   input(type="radio" id="priceChoice" name="choicePrice" class="inputMoney")
   label(class="labelMoney" for="choicePrice")

As you can see from the state, I take only the text and the price.
Next comes the style container. There is no input by default, it is hidden, and I make a custom label with styles (it's common when you need to customize the input)
Below is its style:

.priceOne
  position absolute
  width 180px
  left 18.5px
  bottom -91px
  height 180px
  background #eddcc4
  z-index 1
  transform rotate(-45deg)
  border-bottom-left-radius 30%
  border-top-right-radius 30%
  display flex
  align-items flex-end
  margin-left 20px

When I click on it(label), ::after appears and the background changes

#priceChoice:checked+label:after
  background #f4c94f !important

Also here are the styles for labelMoney

.labelMoney
  display inline-block
  position relative
  line-height 20px
  cursor pointer
  &::before
    content ""
    position absolute
    top -76px
    right -80px
    width 50px
    height 50px
    border-radius 50%
    background-color #fff
    z-index 5
   &:after
   z-index 10
   content ""
   position absolute
   left 37px
   top -68px
   width 35px
   height 35px
   border-radius 50%
   background #ffffff

The problem is that it doesn't work. Those. I have similar styles below but without vuex(in different containers) and everything works (the ::after label replaces the background). Nothing helps either z-index or changing the position, even if style is done without scoped :checked. Please report an error!
Here's another screenshot to show exactly what I'm talking about:

Answer 1

As I understand it, I either have a hard overlay, or I simply can’t see where and what is poking. (does not work in other words) After parsing all the attributes, I got to the point that 1 circle is placed NOT depending on where you poke. Here it was already clear that this :after is hung by id (as we wrote) and only on the first element. Therefore, I found a dumb solution, namely, I dynamically transfer new id's to each iteration of the loop. Those. 4 id from the state, after already in the styles I do the same as they were: after + label and so on. I got the necessary functionality, but I see the whole shit code. If you have a better solution than mine - I'll be happy to know and try!
Why did I need state at all? The fact is that it is these numbers (price) that are sent to our database, and by clicking dynamically (there is still a layout below) we move there too. Those. it was possible without state, but it makes no sense to write additional code, and the errors will be 100%.

Answer 2

In fact, do not care, the difference is cheap.

Answer 3

I usually press to the first option: on the one hand, the savings are quite significant, on the other hand, the code remains relatively readable and you can work with it directly, without constant recompression from the original version.