Utilizing the package https://www.npmjs.com/package/vue-css-donut-chart#usage-with-all-the-available-props to create a "border" effect around images based on progress has presented a challenge. Specifically, achieving a gradient color for the border when it reaches 100% is not supported by the props provided. In an attempt to address this issue, the following workaround was implemented:

if(this.sections[0].value === 50) {
    this.sections[0].color = "transparent";
    this.sections[1].color = "transparent";
    let grad = document.querySelector(".cdc");
    grad.classList.add("border-gradient");
    console.log(grad);
}

The component is used in multiple locations within the application, but the gradient color only takes effect at one specific place:

<Home>
<sidebar/> <-----

<router-view />
</Home>

Main.js

import Donut from "vue-css-donut-chart";
import "vue-css-donut-chart/dist/vcdonut.css";
Vue.use(Donut);

Donut component

<template>
<div>
     <vc-donut
          :sections="sections"
          :size="size"
          :start-angle="angle"
          :thickness="thickness"
          :foreground="'#D4DDFC85'"
        >
        <b-img v-if="profilePic" class="object-fit-contain rounded-circle p-1 m-0" :width="width" :src="profilePic"/>
        </vc-donut>
        </div>
</template>

<script>
import backend from "@/services/backend.js";

export default {
    props: ["profilePic", "size", "width", "thickness"],
 data() {
    return {
        me: null,
        angle: null,
      sections: [
        { value: 0, color: "#4ECB62" },
        { value: 0, color: "#223C9B" },
      ],
    };
  },
  mounted() {
      this.fetch_me();
  },



  methods: {
      async fetch_me() {
          this.me = (await backend.me()).data;
         
          
       
         if(this.me.roles.indexOf('investor') != -1 && this.me.roles.indexOf('homeowner') != -1) {
            // Set values for homeowner depending on amount of listed properties
           /*  if(this.me.homes.length == 100) {
                 this.sections[1].value = 50
             } else if (this.me.homes.length >= 25) {
                 this.sections[1].value = 40
             } else if (this.me.homes.length >= 5) {
                 this.sections[1].value = 35
             } else {
                 this.sections[1].value = 25
             }*/

             this.sections[1].value = 50;
               this.sections[0].value = 50;
               if(this.sections[0].value === 50) {
                   this.sections[0].color = "transparent";
                   this.sections[1].color = "transparent";
                   let grad = document.querySelector(".cdc");
                   grad.classList.add("border-gradient");
                   console.log(grad);
               }
            // Set the correct angle depending on the value (Investor & Homeowner)
                 if(this.sections[0].value == 40 || this.sections[1].value == 40) {
                    return this.angle = 35;
                 } else if (this.sections[0].value == 50 || this.sections[1].value == 50) {
                    return this.angle = 0;
                 } else if (this.sections[0].value == 35 || this.sections[1].value == 35) {
                    return this.angle = 90;
                 }  else if (this.sections[0].value == 25 || this.sections[1].value == 25) {
                    return this.angle = 25;
                 }
            
          } else if(this.me.roles.indexOf('homeowner') != -1) {
            if(this.me.homes.length == 100) {
                 this.sections[1].value = 100;
             } else if (this.me.homes.length >= 25) {
                 this.sections[1].value = 85;
             } else if (this.me.homes.length >= 5) {
                 this.sections[1].value = 65;
             } else {
                 this.sections[1].value = 50;
             }
        
    
            // Set the correct angle depending on the value (Homeowner)
                if(this.sections[1].value == 50) {
                    return this.angle = 90;
                } else if(this.sections[1].value == 65) {
                    return this.angle = 62;
                } else if(this.sections[1].value == 85) {
                    return this.angle = 27;
                } else {
                    return 0;
                }
          } else if(this.me.roles.indexOf('investor') != -1) {
              this.sections[0].value = 50;
              if(this.sections[0].value == 50) {
                this.sections[0].value = 50;
              }
              // Set the correct angle depending on the value (Investor)
              if(this.sections[0].value == 50) {
                    return this.angle = 90;
                } 
          }
      },

  }
}
</script>

The console.log(grad) shows that the class is added to the element, but the CSS isn't applied.

Example of use of the Donut(ProfileImageRings) component

<profile-image-rings v-if="user.picture" :width="160" :size="170" :thickness="7" :profilePic="user.picture"/>

custom.scss

.border-gradient {
    background: linear-gradient(90deg, #223C9B 0%, #4ECB62 100%) !important;
}