Javascript VueJS$refs在：src change之后未定义

VueJS 3中的$refs有问题，我有3个绑定到：src的图像，然后我使用一个方法更改：src中的值，但是$refs没有定义。EventListener animationend工作正常，因为控制台错误显示在动画的末尾

这是密码

<img :src="mainImg" class="illustration" @click="switchImg">
                <div class="glitch_effect" ref="glitchEffect">
                    <img :src="mainImg" class="glitch-one" ref="glitchOne">
                    <img :src="mainImg" class="glitch-two" ref="glitchTwo">
                </div>

使用

（）=>{}

而不是

函数（）{}

此处

this.$refs.glitchOne.addEventListener（“animationend”，函数（）{

export default {
    name: "illustration",
    data() {
        return {
            mainImg: 'https://www.mathieubarco.com/assets/img/sing_for_me.jpg',
        }
    },
    methods: {
        switchImg() {

            this.mainImg = "https://www.mathieubarco.com/assets/img/regina_final.jpg"
            // these $refs are defined and add the class
            this.$refs.glitchOne.classList.add('glitch-active');
            this.$refs.glitchTwo.classList.add('glitch-active');
            this.$refs.glitchEffect.classList.add('glitch-active');

            this.$refs.glitchOne.addEventListener("animationend", function () {
                // these $refs are undifined and don't remove the class
                this.$refs.glitchOne.classList.remove('glitch-active')
                this.$refs.glitchTwo.classList.remove('glitch-active')
                this.$refs.glitchEffect.classList.remove('glitch-active')
            });
        }
    }

}