I wanted to make a game where you have to turn cards in order to reveal the back, but I can't get the background image to show.
I'm still new to vue so I don't know if I did something stupid. I think it has something to do with the fact that I add the background through a script.

This is the App.vue:

```
<template>
  <div class="griglia">
    <Card num="1" path="../assets/squalo.png" />
    <Card num="2" path="../assets/squalo.png" />
    <Card num="3" path="../assets/squalo.png" />
    <Card num="4" path="../assets/squalo.png" />
    <Card num="5" path="../assets/squalo.png" />
    <Card num="6" path="../assets/squalo.png" />
    <Card num="7" path="../assets/squalo.png" />
    <Card num="8" path="../assets/squalo.png" />
    <Card num="9" path="../assets/squalo.png" />
  </div>
</template>

<script>
import Card from "./components/Card.vue"

export default {
  name: 'App',

  components: {
    Card,
  },
};
</script>

<style>
* {
  box-sizing: border-box;
  user-select: none;
  margin: 0;
  padding: 0;
}

body {
  width: 100%;
  height: 100%;
  background-image: linear-gradient(#7c00e1, #4f009e);
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden;
  color: white;
}

div.griglia {
  width: 30vw;
  height: 30vw;
  display: flex;
  justify-content: space-around;
  flex-wrap: wrap;
}
</style>

```

And this is the Card.vue component:

```
<template>
    <div class="el">
        <div class="card" :id="'el'+num" @click="flip">
            <div class="front">{{num}}</div>
            <div class="back" :id="'b'+num"></div>
        </div>
    </div>
</template>

<script>
export default {
    props: {
        num: String,
        path: String
    },
    methods: {
        flip() {
            document.getElementById("b" + this.num).style = 'background-image: url("' + this.path + '"); background-size: cover'
            document.getElementById("el" + this.num).style = "transform: rotateY(180deg);"
        }
    }
};
</script>

<style scoped>
div.el {
  width: 30%;
  height: 30%;
  cursor: pointer;
  position: relative;
}

div.card {
  box-shadow: 0 0 15px black;
  position: absolute;
  width: 100%;
  height: 100%;
  transform-style: preserve-3d;
  transition: all 0.3s ease;
}

div.front {
  position: absolute;
  background-color: #111111;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
  font-family: Impact, Haettenschweiler, 'Arial Narrow Bold', sans-serif;
  font-size: 3.5vw;
  backface-visibility: hidden;
}

div.back {
  position: absolute;
  width: 100%;
  height: 100%;
  backface-visibility: hidden;
  transform: rotateY(180deg);
  background-image: none;
}
</style>

```