How to update DOM element when property inside a model changed?

A model has a property called rectsList which contains a list of SVG rect elements (an arroy of rect elements).

All the rects are append into an svg element in didRender lifecycle hook method (see code below),

didRender() {
    let $svg = this.$().find('svg');
    this._clearSvg($svg);
    this._renderSelectedRects($svg); // append all rects in rectsList to svg
},

_renderSelectedRects($svg) {
    const rects = this.get('image.rectsList');
    rects.forEach((rect) => {
        $svg.append(rect);
    });
}

The expect behavior:

When the rectsList changes, the rect inside svg is automatically updated.

The question:

Where is the best place to re-render all the rects on the DOM based on the current state of rectsList.

I have tried to log the state of current model using didUpdateAttrs but when the rectsList changes the method is not get triggered.

I am thinking using the observer but I do not have the access to the DOM element inside callback function.