Particles not showing. Why?

[JeliBeanMachine]

I have followed the tutorial as shown on the project page. My vue-particles div appears, with the provided background color, but the particles do not appear, or they are being occluded. Why might this be happening? I have provided the necessary parts of my code below:

DemoParticles.vue

<template>
  <vue-particles
    id="tsparticles"
    :options="options"
    @particlesLoaded="particlesLoaded"
  />
</template>

<script>
export default {
  name: "DemoParticles",
  data() {
    return {
      options: {
        background: {
          color: {
            value: "#0d47a1",
          },
        },
        detectRetina: true,
        fpsLimit: 120,
        interactivity: {
          events: {
            onClick: {
              enable: true,
              mode: "push",
            },
            onHover: {
              enable: true,
              mode: "repulse",
            },
          },
          modes: {
            bubble: {
              distance: 400,
              duration: 2,
              opacity: 0.8,
              size: 40,
            },
            push: {
              quantity: 4,
            },
            repulse: {
              distance: 200,
              duration: 0.4,
            },
          },
        },
        particles: {
          color: {
            value: "#ffffff",
          },
          links: {
            color: "#ffffff",
            distance: 150,
            enable: true,
            opacity: 0.5,
            width: 1,
          },
          move: {
            direction: "none",
            enable: true,
            outModes: "bounce",
            random: false,
            speed: 6,
            straight: false,
          },
          number: {
            density: {
              enable: true,
            },
            value: 80,
          },
          opacity: {
            value: 0.5,
          },
          shape: {
            type: "circle",
          },
          size: {
            value: {
              max: 5,
              min: 1,
            },
          },
        },
      },
    };
  },
  methods: {
    async particlesLoaded(container) {
      console.log("Particles container loaded", container);
    },
  },
};
</script>

App.vue

<template>
  <demo-particles />
</template>

<script>
import DemoParticles from "./DemoParticles.vue";

export default {
  name: "App",
  components: {
    DemoParticles,
  },
};
</script>

main.js

import { createApp } from "vue";
import Particles from "@tsparticles/vue3";
import { loadSlim } from "@tsparticles/slim";
import App from "./App.vue";

createApp(App)
  .use(Particles, {
    init: async (engine) => {
      await loadSlim(engine);
    },
  })
  .mount("#app");