fix: ensure modified properties are always reactive

before unwrapping the props for mapping `styles` to `style` had a side effect which caused that the reactivity git lost.
In fact watchers never fired (as reported in #349).

closes #349

Author: d-koppenhagen

src/composables/__tests__/usePropsAsObjectProperties.spec.ts

@@ -42,7 +42,7 @@ describe("usePropsAsObjectProperties", () => {
 
   it("should be possible to watch resulting properties and register changes on the input props", async () => {
     const WrapperComponent = defineComponent({
-      props: ["foo", "style"],
+      props: ["foo"],
       setup(props) {
         const watchFired = ref(false);
         const properties = usePropsAsObjectProperties(props);
@@ -63,4 +63,28 @@ describe("usePropsAsObjectProperties", () => {
 
     expect(wrapper.vm.watchFired).toEqual(true);
   });
+
+  it("should watch modified styles property and register changes on the input props", async () => {
+    const WrapperComponent = defineComponent({
+      props: ["styles"],
+      setup(props) {
+        const watchFired = ref(false);
+        const properties = usePropsAsObjectProperties(props);
+
+        watch(properties, () => {
+          watchFired.value = true;
+        });
+        return {
+          watchFired,
+        };
+      },
+    });
+
+    const wrapper = shallowMount(WrapperComponent, {
+      propsData: { styles: "initial" },
+    });
+    await wrapper.setProps({ styles: "updated" });
+
+    expect(wrapper.vm.watchFired).toEqual(true);
+  });
 });

src/composables/usePropsAsObjectProperties.ts

@@ -1,4 +1,4 @@
-import { inject, reactive, type UnwrapNestedRefs } from "vue";
+import { inject, reactive, type UnwrapNestedRefs, toRefs } from "vue";
 
 type OlClassOptions<T> = T extends { styles: infer S }
   ? { style: S } & Omit<T, "styles">
@@ -12,7 +12,7 @@ function checkAndUpdateStylePropDef<T extends Record<string, unknown>>(
   options: T,
 ) {
   if ("styles" in options) {
-    const { styles, ...rest } = options;
+    const { styles, ...rest } = toRefs(options);
     return { style: styles, ...rest } as OlClassOptions<T>;
   } else {
     return options as OlClassOptions<T>;