Unexpected mutation of “xxxx“ prop

reason

It's because the child modified the parent's data, so this error was reported when eslint was executed.

Fix 1

If it is a component such as a pop-up window, it can be modified according to the function. For example, the dialog of element ui I use can be changed to this

Use model-value instead

Fix 2

Create a new subcomponent variable, and then use watch to synchronize parent-child and variable data.

Fix 3

If you are using the input component, you need to add an @update method, and that's it.

 <a-modal :visible="visible"  @update:visible="updateVisible" >
 
  const updateVisible = (e) => {
    
    
    emits('update:visible', e);
  };
  
  const emits = defineEmits<{
    
    
    (e: 'handleOk', val: any): void;
    (e: 'update:visible', val): void;
  }>();