AFRAME.ANIME on child element

Question

Found this example using ARAME.ANIME, but having an issue when trying to apply this method to a child element - I'm trying to animate the material.color.

AFRAME.registerComponent('colour-anim', {
init: function () {
    this.el.addEventListener('model-loaded', this.update.bind(this));
},
update: function () {

    var el = this.el;
    var data = this.data;

    el.object3D.traverse(function (child) {
        if (child.isMesh) {
            var self = this;
            this.time = 0;
            this.animation = AFRAME.ANIME({
                targets: [{ x: -Math.PI / 2, y: 0, z: 0 }],
                x: -Math.PI / 2, y: 0, z: 2 * Math.PI,
                autoplay: false,
                duration: 20000,
                easing: "linear",
                loop: true,
                round: false,
                update: function (animation) {
                    var value = animation.animatables[0].target;
                    self.el.object3D.material.color.set(value.x, value.y, value.z);
                }
            });
            this.animation.began = true;
        }
    });



},
    tick: function (t, dt) {
        this.time += dt;
        this.animation.tick(this.time);
    }
});

It works fine if I just apply the animation in the init on the main model - it's just when I try to get access to the child object that problems arise

Uncaught TypeError: Cannot read properties of undefined (reading 'tick')

Any help in getting this working is much appreciated