avatar-uploader | The image/avatar uploader | File Upload library

You cant stop it - in Vue props are One-Way Data Flow only. If you open the browser Dev Tools you should see error message from Vue telling you exactly this.

Changing relationlist sort of works because you are updating the array in-place (modifying existing instance instead of replacing it ....which is not possible with numbers etc.) but if you try something else (for example creating new array with filter), it will stop working too.

Only correct way around it is to emit event and let the parent component (owner of the data) to do the modifications (google "props down events up"). This of course becomes harder and harder as the depth of the component tree and the distance between data owner and child component increases. And that's one of the reasons why global state management tools like Vuex exist....

Another way is to pass the data by single prop of type Object. As long as you only modify object's properties (not replacing the object itself), it will work. But this not recommended and considered anti-pattern...

useState is the concept of React Hook, and you need to define the useState in the functional component, not class component.

You have to adapt the mimeType of your desired file format (file.type) according to the MIME types docs.

For .xls you can find the correct type:

.xls Microsoft Excel application/vnd.ms-excel

This will result in the following check: