Solution 1 :

I’d say placing the requestUpdate Method right after you change obj.value is a good Idea.

I work a lot whith this.requestUpdate() and it usally triggers the change i wanted.

You coul also look at the this.updated Method and implement it like this:

updated(changedProperties: PropertyValues): void {
    if (changedProperties.has('obj') triggerMethod()

But this should do it for you:

 handleClick(value) {
    this.obj.value = value;

to your concern, using that method is ABSOLUTLY optimized for web-standards 🙂

Problem :

Is it possible to somehow trigger component re-render when the property of the observed object changes? I know that the component will re-render if I replace the object but it does not when I just change its property

class SomeComponent extends LitElement {

      static get properties() {
        return {
          obj: { type: Object, reflect: true }

      constructor() {
        this.obj = {
           value: 'value' 


      handleClick(value) {
        this.obj.value = value;

      render() {
        return html `
            <p>My Value: ${this.obj.value}</p>

            <button @click="${() => this.handleClick('new value')}">Button</button>


 customElements.define('some-component', SomeComponent);

Tried to use this.requestUpdate() and it works, but i am not sure if such solution is optimized