How do you change the value of a lightning-input-field in javascript?

This is working as designed. You can modify lightning-input-fields programmatically by changing whatever is specified on their value attribute and it will work...except (here comes the catch)...

Once the user provides any input whatsoever, you cannot programmatically change a lightning-input-field. This is documented in the docs for lightning-input-field:

If a user enters anything in an input field, you can no longer programmatically set the value of the field. The assumption is that there are unsaved changes that should not be overwritten. If you want to be able to overwrite user changes, you can use lightning-input instead.

This special behavior for lightning-input-field conflicts with how properties on all other child components are handled, which makes it very unintuitive. From the LWC docs for Set Properties on Child Components: "The data binding for property values is one-way. If the property value changes in the owner component, the updated value propagates to the child component."

Vote for the idea Remove restriction on programmatically setting lightning-input-fields.

Have one "not so bad solution". You should wrap all 'lightning-input-field' in <template if:true={renderInputs}></template>

On init your '@track renderInputs = true';

When you need to clear value you will do next:

inputClear() {
    this.renderInputs = false;
    setTimeout(() => {this.renderInputs = true}, 0);
}

This will couse rerender of lightning-input-field. This will not be work without setTimeout(). Or you can use setInterval - any asynch function.