Type 'string' is not assignable to type 'ComputedRef<string>'

Question

I've got this code in my Vue app: What I want to do is change the color property based on the props. I also use computed, because the color property could change outside the component.

export default defineComponent({
  name: 'mail-dropdown',
  props: {
    title: {
      type: String,
      default: '',
      // required: true
    },
    id: {
      type: String,
    },
    shade: {
      type: String,
      default: 'white',
    },
    grey: {
      type: Boolean,
      default: false,
      // required: true
    },
    items: { type: Object as PropType<ActionItem[]> },
  },
  setup(props, context) {
    const store = useCounterStore();
    let color = computed(() => props.shade);
    if (props.grey == true) {
      color = 'grey-5';
    };
    
    return { store, color };
  },
});

I got an error here:

if (props.grey == true) {
  color = 'grey-5';
};

The error is the following:

> let color: ComputedRef<string> 
Type 'string' is not assignable to type 'ComputedRef<string>'.

What is the solution to changing the color?

Answer 1

You missed to add .value :

  if (props.grey == true) {
    color.value = 'grey-5';
 };

but computed property should be writable like :

 let color = computed({
   get(){
     return props.shade
   },
  set(val){
  //emit the new val or mutate the store state
   }
  });