V-if v-else not updating when prop changes

Hello

I have the following component, and neither v-btn nor v-progress-circular in the activator slot are shown when the loading prop changes.
v-btn is shown during the initial rendering, but when “Done” is clicked, dialog is closed and upload is performed by a parent component which updates the loading prop and set it to false when upload is finished.
Neither v-btn nor v-progress-circular are shown during this whole process.

<template>
    <v-dialog :value="value && loading === false" @input="$emit('input', $event)">
        <template v-slot:activator="{ on }">
            <slot name="activator" :on="on">
                <v-btn v-if="loading === false" small v-on="on">
                    <v-icon small>mdi-upload</v-icon>
                </v-btn>
                <v-progress-circular v-else :value="loading">{{ loading }}</v-progress-circular>
            </slot>
        </template>
        <v-card>
            <v-card-title>
                Upload file revision for "<span class="label">{{ name }}</span
                >"
            </v-card-title>
            <v-card-text>
                <v-file-input
                    label="Select file to upload"
                    show-size
                    @change="file = $event"
                ></v-file-input>
                <v-textarea label="Change description"></v-textarea>
            </v-card-text>
            <v-card-actions>
                <v-spacer></v-spacer>
                <v-btn @click="$emit('input', false)">Cancel</v-btn>
                <v-btn :disabled="!file" @click="done">Done</v-btn>
            </v-card-actions>
        </v-card>
    </v-dialog>
</template>

<script>
export default {
    props: {
        name: {
            type: String,
            required: true,
        },
        value: {
            type: Boolean,
            default: false,
        },
        loading: {
            type: [Number, Boolean],
            default: false,
        },
    },
    data() {
        return {
            file: null,
            changeDescription: '',
        };
    },
    methods: {
        done() {
            if (this.file) {
                const { file, changeDescription } = this;
                this.$emit('upload', { file, changeDescription });
            }
        },
    },
};
</script>

I think the v-else statement is wrong. It should be:

 <v-progress-circular v-else>{{ loading }}</v-progress-circular>

Regards,
Billal BEGUERADJ

I don’t know if the previous answer helped however I did find:

https://stackoverflow.com/questions/55188478/meaning-of-v-slotactivator-on

Which discusses this pattern. In particular it is noted that at the time the StackOverflow answer was written IE didn’t support destructuring so the slot’s activator may not be correct. In addition, it looks like :on should be replaced with v-on?