Why does negative z-index not work in Nuxt.js?

Question

css

I want to make on the page not a normal background, but a background with animation. And in order for it not to overlap all the elements, I added z-index: -1 to it . At first it all worked great. But when I switched to Nuxt.js and pasted the same code, the background was gone. If you remove the z-index , the background is displayed on top of all elements, and with a negative value, it is not displayed at all. How to fix it?

<template>
  <div>
    <div class="background"></div>
    <div>...</div>
  </div>
</template>

.background {
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  z-index: -1;
  background: linear-gradient(-45deg, #ee7752, #e73c7e, #23a6d5, #23d5ab);
  background-size: 400% 400%;
  background-position: 0% 50%;
  animation: gradient 15s ease infinite;
}

@keyframes gradient {
  0% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
}