What is the problem on the remote server?

Question

JavaScript

In the project I use lottie-web
animation components

<template lang="pug">
    .bs-loading-card.d-flex
        lottie(:options='defaultOptions', :height='125', :width='125', v-on:animCreated='handleAnimation')
</template>

<script>

    import Lottie from './lottie';
    import animationData from '../../assets/loading-brick.json';

    export default {
        name: "loadinganim",
        components: {
            'lottie': Lottie
        },
        data() {
            return {
                defaultOptions: { default: animationData },
                animationSpeed: 2
            }
        },
        methods: {
            handleAnimation: function (anim) {
                console.log(this.defaultOptions)
                this.anim = anim;
            },

            stop: function () {
                this.anim.stop();
            },

            play: function () {
                this.anim.play();
            },

            pause: function () {
                this.anim.pause();
            },

            onSpeedChange: function () {
                this.anim.setSpeed(this.animationSpeed);
            }
        },
    }
</script>

Lottie component

<template>
    <div :style="style" ref="lavContainer"></div>
</template>

<script>
    import lottie from 'lottie-web';
    import * as animationData from '../../assets/loading-brick.json';

    export default {
        props: {
            options: {
                type: Object,
                required: true
            },
            height: Number,
            width: Number,
        },

        data () {
            return {
                style: {
                    width: this.width ? `${this.width}px` : '100%',
                    height: this.height ? `${this.height}px` : '100%',
                    overflow: 'hidden',
                    margin: '0 auto'
                }
            }
        },

        mounted () {
            console.log(this.options)
            this.anim = lottie.loadAnimation({
                    container: this.$refs.lavContainer,
                    renderer: 'svg',
                    loop: this.options.loop !== false,
                    autoplay: this.options.autoplay !== false,
                    animationData: this.options.default,
                    rendererSettings: this.options.rendererSettings
                }
            );
            this.$emit('animCreated', this.anim)
        }
    }
</script>

everything works fine on local, but when I upload it to prod, when the animation starts in the lottie component, it gives the error
Cannot set property a of function(){return e} which has only a getter vue js

Answer 1

add anim object to data() {}