Estás mezclando variables SCSS con variables CSS3 aquí:

• Las variables definidas en sus archivos scss son variables SCSS, es decir, $primary: #4a90e2; .
• Las variables definidas en su App.vue es decir bodyStyles.setProperty('--primary-color', '#ef4d4d'); son variables CSS.

Estas son completamente 2 variables diferentes.

Para cambiar dinámicamente sus colores a través de JavaScript en Vue, deberá usar variables CSS en su código. Por ejemplo:

 color: var(--primary-color); /* Instead of using $primary */ :root { --primary-color: #4a90e2 }

El problema aquí es que está usando bootstrap y necesitaría refactorizar su base de código para usar variables CSS en todo su código SCSS, incluida la sobrescritura de las variables bootstrap. Esto no es una tarea simple como puedo decir de mi experiencia. Mi enfoque fue:

1. Sobrescriba las variables de color de arranque en variables SCSS, por ejemplo, $primary: var(--primary-color);
2. Sobrescriba las funciones de color de arranque definidas en functions.scss incluidas color-contrast , tint-color , shade-color .
3. Sobrescriba y refactorice los buttons.scss , alerts.scss y tables.scss de boostrap.

Mi caso de uso fue diferente y el tuyo podría ser completamente diferente. Un enfoque más simple sería no usar bootstrap (si no usa mucho bootstrap), pero depende de usted cómo quiere manejar esto.

Otro enfoque podría ser no cambiar las variables CSS y compilar su SCSS a través de Node.JS en el servidor para generar un archivo css.