Using the responsive option cause an Internal Error: too much recursion

[cyrilf]

As soon as I add a responsive property in the config object, any update to the config will trigger a "too much recursion" error.

I found a similar report on StackOverflow

Reproduction

I created a simple bug reproduction there.

:one: Once loaded, go to page A. You should see the chart. :two: Click on "back" home. :three: Go to page B. You don't see the chart.

In the console you should see the error: Uncaught (in promise) InternalError: too much recursion. If you click on "back" home, you won't be able to.. and the console display the error: Uncaught (in promise) TypeError: this.w.globals.dom.Paper is undefined.

Refreshing the page solves the issue, but this is not the intended behavior.

If we don't set the responsive property on the config, then, none of those error would happen.

[cyrilf]

If anyone is interested, I found a workaround.. not the best, obviously, but it solves my problem.

I'm using https://vueuse.org/core/useBreakpoints/ from the vueuse package. So, instead of using the responsive option, I manually change the options object based on the current breakpoint.

Here is what I do:

import { breakpointsTailwind, useBreakpoints } from "@vueuse/core";

const breakpoints = useBreakpoints(breakpointsTailwind);
const isSmall = breakpoints.smaller("lg");

const options: Ref<ApexOptions> = computed(() => ({
  legend: {
    position: isSmall.value ? "bottom" : "right",
    fontSize: isSmall.value ? "18px" : "20px",
  },
}));

instead of:

...
responsive: [
   {
     breakpoint: 1024,
     options: {
       legend: {
         position: "bottom",
         fontSize: "18px",
  }
]