problem description

in vue, I have the following templates:

<i class="bar" :style="style">
    <i class="dot"></i>
</i>

then the code in js is as follows:

props: {
        progress: {
            type: Number,
            default: function () {
                return 0;
            }
        },
        userInfo: {
            type: Object,
            default: function () {
                return {};
            }
        }
    },
    mounted() {
        let self = this;
        self.$nextTick(() => {
            self.width = self.progress;
        })
        // setTimeout(() => {
        //     this.width = this.progress;
        // })

    },
    computed: {
        style() {
            return {
                width: this.width + "%",
            }
        }
    },

bar has a dynamic effect of width change:

transition: width 0.5s ease;

Why do I have no dynamic effect when I use nextTick, but why do I have dynamic effect when I use setTimeout?