diff --git a/addons/mail/static/src/components/dialog_manager/dialog_manager.js b/addons/mail/static/src/components/dialog_manager/dialog_manager.js
index 0f8d4d36ca2..f6800654040 100644
--- a/addons/mail/static/src/components/dialog_manager/dialog_manager.js
+++ b/addons/mail/static/src/components/dialog_manager/dialog_manager.js
@@ -1,8 +1,9 @@
 /** @odoo-module **/
 
+import { useUpdateToModel } from '@mail/component_hooks/use_update_to_model';
 import { registerMessagingComponent } from '@mail/utils/messaging_component';
 
-const { Component, onMounted, onPatched } = owl;
+const { Component } = owl;
 
 export class DialogManager extends Component {
 
@@ -11,40 +12,12 @@ export class DialogManager extends Component {
      */
     setup() {
         super.setup();
-        onMounted(() => this._mounted());
-        onPatched(() => this._patched());
+        useUpdateToModel({ methodName: 'onComponentUpdate' });
     }
 
-    _mounted() {
-        this._checkDialogOpen();
-    }
-
-    _patched() {
-        this._checkDialogOpen();
-    }
-
-    //--------------------------------------------------------------------------
-    // Public
-    //--------------------------------------------------------------------------
-
     get dialogManager() {
         return this.props.record;
     }
-
-    //--------------------------------------------------------------------------
-    // Private
-    //--------------------------------------------------------------------------
-
-    /**
-     * @private
-     */
-    _checkDialogOpen() {
-        if (this.dialogManager.dialogs.length > 0) {
-            document.body.classList.add('modal-open');
-        } else {
-            document.body.classList.remove('modal-open');
-        }
-    }
 }
 
 Object.assign(DialogManager, {
diff --git a/addons/mail/static/src/models/dialog_manager.js b/addons/mail/static/src/models/dialog_manager.js
index 12b8dd8ee78..bc5ee594a7e 100644
--- a/addons/mail/static/src/models/dialog_manager.js
+++ b/addons/mail/static/src/models/dialog_manager.js
@@ -5,6 +5,15 @@ import { many } from '@mail/model/model_field';
 
 registerModel({
     name: 'DialogManager',
+    recordMethods: {
+        onComponentUpdate() {
+            if (this.dialogs.length > 0) {
+                document.body.classList.add('modal-open');
+            } else {
+                document.body.classList.remove('modal-open');
+            }
+        },
+    },
     fields: {
         // FIXME: dependent on implementation that uses insert order in relations!!
         dialogs: many('Dialog', {