Javascript 从 URL 加载 img 时加载 Spinner Vue

我想在IMG加载时获得加载器旋转器，但我不知道这是如何实现的.

没有加载器，但我go 了标签，对错都写到了控制台上，但还是没有旋转器

<template>
    <div class="KingOfMountain">
        <Spinner v-if="isLoading"/> //// ERROR
        <div v-else class="container">
            <div v-if="!isEndGameKing" class="choices">
                <p id="score">{{ currentCountKing }}/{{ ALL_FILMS.length - 1 }}
                <p/>
                <div class="photos">
                    <div class="first__film">
                        <img :src="firstFilm.Poster" :alt="firstFilm.title" @click="chooseLeftFilm">
                        <p id="title--film">{{ firstFilm.title }}</p>
                    </div>
                    <div class="second__film">
                        <img :src="secondFilm.Poster" :alt="secondFilm.title" @click="chooseRightFilm">
                        <p id="title--film">{{ secondFilm.title }}</p>
                    </div>
                </div>
            </div>
            <div v-else class="winner">
                <p id="winner--title">Победитель</p>
                <img :src="firstFilm.Poster" :alt="firstFilm.title">
            </div>
        </div>
    </div>
</template>

<script>
import game from "@/mixins/game";
import Spinner from "@/components/Spinner/Spinner"; //all good in css . it works


export default {
    name: "KingOfMountain",
    data() {
        return{
            isLoading:false
        }
    },
    components: {Spinner},
    methods: {
        chooseLeftFilm() {
            this.isLoading=true
            this.redirectToResultKing() // it is method in mixins (all Good, it works)
            this.isLoading=false
        },
        chooseRightFilm() {
            this.isLoading=true
            this.firstFilm = this.secondFilm;
            this.redirectToResultKing() // it is method in mixins (all Good, it works)
            this.isLoading=false
        }
    },
}
</script>

如果我这样使用，它就会旋转，

chooseLeftFilm() {
    this.isLoading=true
    this.redirectToResultKing() // it is method in mixins (all Good, it works)
},

//它将永远旋转

请帮帮我.怎样才能做得更好呢？

我的Mixins:

export default {

methods: {
    updateFilm() {
        // Here i random take 2 images from Vuex and then them delete and etc...
        this.currentCountKing++;
        this.allFilmsKingCopy = this.allFilmsKingCopy.filter(val => val !== this.secondFilm)
        this.secondFilm = this.allFilmsKingCopy[Math.floor(Math.random() * this.allFilmsKingCopy.length)]
    },
    redirectToResultKing() {
        if (this.currentCountKing === this.ALL_FILMS.length - 1) {
            this.isEndGameKing = true
        } else {
            this.updateFilm()
        }
    }
},
computed: {
    ...mapGetters(['ALL_FILMS']),
},

我的Vuex:

export default {
    state: {
        films: [],
    },
    actions: {
        async getFilms({commit}) {
            const data = await fetch(URL);
            const dataResponse = await data.json();
            const films=dataResponse.data
            commit("setData", films)
        },
    },
    mutations: {
        setData(state, films) {
            state.films = films
        },
    },
    getters: {
        ALL_FILMS(state) {
            return state.films
        },
    }
}