reactive issue: component <-> composable

export function useThemeConfig() {
  const themeConfig: ThemeConfig = reactive({
      themeLight: {
        "--primary-color": "#1a73e4",
        ...
      },
  ...
return {
    themeConfig,
    ...
  };

<script setup lang="ts">
  const { themeConfig } = useThemeConfig();
  ...
  themeConfig.themeLight["--primary-color"] = "#ff0000";
</script>
<template>
  <!-- Correctly shows #ff0000 -->
  <div>{{themeConfig.themeLight["--primary-color"]}}</div>
</template>