passing props to vue 3 composable isn't reactive

[inthegreenwild]

I'm trying to pass a component prop to a composable and in the composable is a computed based on one of the component props. For some reason, the computed function is never called when the prop changes. Is there a correct way of doing this in the composition api?

import { useA } from '../composables/a.js'
import { toRefs } from 'vue';

export default {
  props: {
    aProp: String,
  },
  setup(props) {
    // this doesn't work
    const { aProp } = toRefs(props);
    const { aHasChanged } = useA(aProp);

    return {
      aHasChanged,
    };
  },
};

and the composable:

import { computed } from 'vue';
function useComposable(aProp) {
  const aHasChanged = computed(() => {
    return aProp === '';
  });

  return {
    aHasChanged,
  };
}

export { useComposable };

stackblitz example: https://stackblitz.com/edit/github-yfh8fb-xaspss?file=composables%2Fa.js

[LinusBorg]

aProp is a ref, so aProp === '' will always be false.

What you would need is aProp.value === ''

[inthegreenwild]

Of course it was something simple I missed - thanks!