tsParticles onHover not working on my Vue Project

Question

I have been trying to implement the light preset from https://particles.js.org/ but I can't somehow manage to get the onHover effect working. The shapes are appearing just fine but the onHover is not triggering at all and I don't know why. I tried copying the JSON script to the website's Codepen demo and the code works fine so I assume that the problem is within my Vue Project. I tried npm i tsparticles/vue3 and tsparticles/slim and the problem still persists.

Below is my Vue template code:

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

Below is the code block for the onHover and light mode (the code is from tsParticles):

onHover: {
        enable: true,
        mode: "light",
        parallax: {
          enable: false,
          force: 2,
          smooth: 10,
        },
      },

light: {
        area: {
          gradient: {
            start: {
              value: "#3b5e98",
            },
            stop: {
              value: "#17163e",
            },
          },
          radius: 1000,
        },
        shadow: {
          color: {
            value: "#17163e",
          },
          length: 2000,
        },
      },

I tried re-installing all packages, tried modifying the script a bit, tried different approaches to implement tsParticles but nothing seems to work. The only problem now is just the onHover effect not working, the shapes are showing and is fine.

Update:
I tried adding another modes like bubble and repulse and they are working just fine. So it seem that the light mode is the one not working.