在Vue中直接修改SCSS变量并不是直接支持的，因为SCSS（或Sass）是一种预处理器，它的变量和混入（mixins）在编译时被处理，生成最终的CSS文件。这意味着一旦SCSS被编译成CSS并加载到浏览器中，原始的SCSS变量就不再存在，因此不能像JavaScript变量那样在运行时动态修改它们。

然而，有一些方法可以实现类似的效果：

1. 使用CSS变量（自定义属性）：你可以在SCSS中使用CSS变量，然后在Vue组件中动态修改这些CSS变量的值。CSS变量是在运行时可访问的，因此可以根据需要进行修改。

   // 在SCSS文件中定义CSS变量
   :root {
     --primary-color: #007bff;
   }
   
   body {
     background-color: var(--primary-color);
   }
   

   然后在Vue组件中，你可以通过修改DOM的style属性来更新这些变量的值：

   // 在Vue组件中动态修改CSS变量
   mounted() {
     document.documentElement.style.setProperty('--primary-color', '#ff0000');
   }
   

2. 条件性类和内联样式：对于一些简单的样式更改，你可以使用Vue的绑定功能来根据组件的状态动态应用不同的类或内联样式。

   <template>
     <div :class="{ 'dark-theme': isDark }"></div>
   </template>
   
   <script>
   export default {
     data() {
       return {
         isDark: false,
       };
     },
   };
   </script>
   
   <style scoped>
   .dark-theme {
     background-color: #333;
     color: #fff;
   }
   </style>
   

3. 使用JavaScript修改样式：对于更复杂的情况，你可以直接使用JavaScript来修改元素的样式。这可以通过Vue的ref来访问DOM元素，然后修改其style属性来实现。

虽然这些方法可以实现动态修改样式的效果，但它们并不直接修改SCSS变量。在需要根据应用状态动态更改主题或样式时，使用CSS变量是一种流行且有效的方法。