Imagine I have a block of code like this...
const computedStyle = computed(() =>
normalizeStyle([undefined, styleProp, undefined])
);
const computedClass = computed(() =>
normalizeClass([
"button",
classProp,
{
"button--pressed": pressed.value,
"button--enterheld": enterHeld.value,
"button--long-pressed": longPressed.value,
},
])
);
I want to restructure it into something similar to the following
export const useNormalizedStyles = ({
style: styleProp,
class: classProp,
preClass,
postClass,
preStyle,
postStyle,
}: NormalizedStylesProps): NormalizedStylesResult => {
const computedStyle = computed(() =>
normalizeStyle([preStyle, styleProp, postStyle])
);
const computedClass = computed(() =>
normalizeClass([preClass, classProp, postClass])
);
return {
style: computedStyle,
class: computedClass,
};
};
and then make the function call like so
const { style: computedStyle, class: computedClass } = useNormalizedStyles({
style: styleProp,
preClass: "button",
class: classProp,
postClass: {
"button--pressed": pressed.value,
"button--enterheld": enterHeld.value,
"button--long-pressed": longPressed.value,
},
});
However, after making these changes, the updates do not seem to take effect. Perhaps I am missing a reactive somewhere.