NuxtN
Nuxt•13mo ago
Rednib

reactive issue: component <-> composable

Hi, i have a composable useThemeConfig which exports a reactive themeConfig:
export function useThemeConfig() {
  const themeConfig: ThemeConfig = reactive({
      themeLight: {
        "--primary-color": "#1a73e4",
        ...
      },
  ...
return {
    themeConfig,
    ...
  };


then in a component i want to use it and change themeLight['--primary-color'] for example:
<script setup lang="ts">
  const { themeConfig } = useThemeConfig();
  ...
  themeConfig.themeLight["--primary-color"] = "#ff0000";
</script>
<template>
  <!-- Correctly shows #ff0000 -->
  <div>{{themeConfig.themeLight["--primary-color"]}}</div>
</template>


it updates correctly in the component, but the themeConfig in the composable did not change..
How can i achieve reactiveness between the composable and the component?
Was this page helpful?