Update node sprite frame while game is paused

Cocos Creator
#1

Hi,
I have a scene where some objects appear randomly, and I have a node to pause/resume the game, what I need is when clicking on that node the Spriteframe for it to be changed then the game get pause/resume

the issue is that when the game get pause/resume the Spriteframe is not updated, but if I removed the pause/resume code the Spriteframe is get updated.

Code:
cc.Class({
extends: cc.Component,

properties: {
pauseButton: {
type: cc.SpriteFrame,
default: null
},
playButton: {
type: cc.SpriteFrame,
default: null
},

},
onLoad: function () {
this.node.on(cc.Node.EventType.MOUSE_DOWN, function (event) {
if (cc.game.isPaused()) {
cc.game.resume();
this.node.getComponent(cc.Sprite).spriteFrame = this.pauseButton;
} else {
let spriteNode = this.this.node.getComponent(cc.Sprite).spriteFrame = this.playButton;
cc.game.pause();

}
}, this)
},

});

How can I fix this issue? or if there is an alternatives?

#2

pause at next frame.

    clicked () {
        if (this._pause === false) {
            this.Label.string = "resume";
            setTimeout(() => {
                cc.game.pause();
            }, 1000/60);
            this._pause = true;
        }
        else {
            this.Label.string = "pause";
            cc.game.resume();
            this._pause = false;
        }
    }