Line segment styling in Vue-chartJS

Question

I am trying to render a chart in VueJS using ChartJS and the Vue-chartJS wrapper. What I need is to style a specific line segment in a perticular manner(e.g if the value is not available, the line segment will be dashed/ a different color). I have looked over at chart.js documentation which states:

segment: {
        borderColor: ctx => skipped(ctx, 'rgb(0,0,0,0.2)') || down(ctx, 'rgb(192,75,75)'),
        borderDash: ctx => skipped(ctx, [6, 6]),
      },

Where,

const skipped = (ctx, value) => ctx.p0.skip || ctx.p1.skip ? value : undefined;
const down = (ctx, value) => ctx.p0.parsed.y > ctx.p1.parsed.y ? value : undefined;

Now I have tried implementing this in Vue-chartJS but this does not seem to work. Also I do not have the access to the ctx variable. Can anyone help me? I am using ChartJS 2.7.1 and Vue Chart 3.5.1 and this is my code:

this.datacollectionLine = {
        labels: this.labelLine,
        datasets: [
          { 
            data: this.chartData,
            label: "Patient Details",
            backgroundColor: "#2b4c99",

           
            fill: false,
            borderColor: "rgb(43, 76, 153)",
            tension: 0.1,
            pointRadius: 0.1,
            borderWidth: 2,
          },
        ],
      },