Percent done ui component setting percent done does not affect what is displayed

Percent done ui component setting percent done does not affect what is
displayed

I was trying to change the percent done by using the method
setPercentDone() but I found that it would change the underlying data of
the component without rerendering it:
Ext.define('CustomApp', {
extend: 'Rally.app.App',
componentCls: 'app',
items: [{
xtype: 'rallypercentdone',
percentDone: 0.3,
listeners: {
render: function(cmp) {
console.log('cmp.getPercentDone()',cmp.getPercentDone());
cmp.setPercentDone(0.5);
console.log('cmp.getPercentDone()',cmp.getPercentDone());
}
}
}],
launch: function() {
//Write app code here
}
});
console:
cmp.getPercentDone() 0.3
cmp.getPercentDone() 0.5
But the component still displays 30%