Отрицательный z-index не работает в Nuxt.js

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

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

<style scoped>
  .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%;
    }
  }
</style>