Почему отрицательный z-index не работает в Nuxt.js?

Question

[vilaugra]

Я хочу сделать на странице не обычный фон, а фон с анимацией. И для того, чтобы он не перекрывал все элементы, добавил ему z-index: -1. Сначала это все отлично работало. Но когда я перешел на Nuxt.js и вставил тот же код, фон пропал. Если убрать z-index, фон отображается поверх всех элементов, а с отрицательным значением не отображается вовсе. Как это исправить?

<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%;
  }
}