How to update a widget when modifying model data in Odoo - odoo-13

Question

I'm showing the reported hours of a User on the Odoo navbar but I have to F5 if I want to update the data.
It's possible to update the reported hours when someone modifies the model data that contain this information?
My javascript code
odoo.define('L6Odoo13_systray_reported_hours.systray_reported_hours', function (require) {
"use strict";
var Widget = require('web.Widget');
var SystrayMenu = require('web.SystrayMenu');
var field_utils = require('web.field_utils');
var core = require('web.core');
var session = require('web.session');
var ReportedHours = Widget.extend({
template: 'ReportedHours',
init: function() {
this.reported_hours = 0
this._super.apply(this, arguments);
},
events: {
'onchange account.analytic.line': 'willStart',
},
willStart: function(){
var self = this;
var def = this._rpc({
model: 'account.analytic.line',
method: 'search_read',
args: [[['user_id', '=', this.getSession().uid]], ['name', 'unit_amount', 'date']],
})
.then(function (res) {
var today = new Date();
var hoy = today.getFullYear() + '-' + (today.getMonth() + 1) + '-' + today.getDate()
if (res.length) {
var total = 0.0
res.forEach(function(elem){
if (elem.date === hoy){
total += elem.unit_amount
}
})
self.reported_hours = field_utils.format.float_time(total);
}
});
return Promise.all([def, this._super.apply(this, arguments)]);
},
})
ReportedHours.prototype.sequence = 90;
SystrayMenu.Items.push(ReportedHours);
return {
ReportedHours: ReportedHours,
};
});
My xml code
<?xml version="1.0" encoding="UTF-8" ?>
<templates>
<t t-name="ReportedHours">
<li class="o_mail_systray_item" style="margin-top: 13px;">
<div>
<span t-esc="widget.reported_hours"/>
</div>
</li>
</t>
</templates>
Of course I know that the code in 'events:' is incorrect, but is what I'm looking for.
I want to update the 'self.reported_hours' when someone modifies the 'account.analytic.line' data.