class does not support responsive updates

[anncwb]

When I dynamically change the theme, the class cannot take effect

All dynamically modified classes have this problem

const headerClass = computed(() => {
      const theme = unref(getProjectConfigRef).headerSetting.theme;
      return theme ? `layout-header__header--${theme}` : '';
    });

<div
          class={[
            'bg-white flex p-0 px-4 justify-items-center',
            unref(headerClass),
          ]}
        ></div>

[cereschen]

import { ref, defineComponent, unref, computed, watch } from 'vue'
export default defineComponent({
  name: 'test-dynamically-class',
  setup() {
    const config = ref({ headerSetting: { theme: 'dark' } })
    const headerClass = computed(() => {
      const theme = unref(config).headerSetting.theme;
      return theme ? `layout-header__header--${theme}` : '';
    });

    watch(() => headerClass.value, (val) => {
      console.log('current class name is: ' + val)
    })

    return () =>
      <>
        <span class={[
          'bg-white flex p-0 px-4 justify-items-center',
          unref(headerClass),
        ]} >hello world</span>
        <select v-model={config.value.headerSetting.theme}>
          <option label="dark" value="dark">
          </option>
          <option label="light" value="light">
          </option>
        </select>
      </>
  }
})

.layout-header__header--light {
  color: firebrick;
}
.layout-header__header--dark {
  color: white;
  background: #333;
}

I tested that the above code worked correctly. Did I leave anything else out?

[anncwb]

The only difference between me and you is that the theme is obtained from the vuex store. I printed the log here, and the data has changed. But the interface style has not changed. Can be used after disabling the plugin

[anncwb]

The bound data has indeed changed, but I am viewing the dom element from the browser console. There is no change.

[anncwb]

I think it might be the problem of vite hmr

[cereschen]

I tried the Vuex and it was ok. Try to delete node_modules/.vite_opt_cache and rerun server

[anncwb]

No, I can only temporarily disable the plugin for now. When I have time later, I will fork a copy to check it out. Thank you

[cereschen]

It doesn't matter. I'll continue to refine the plugin,. because I don't use vue3 in my work for the time being, so some problems can't be found in time.