Chart is not shown while being in hidden div

[DepickereSven]

Expected Behavior

If I show the content of the hidden div the chart should be visible.

Actual Behavior

The height of the chart stays empty so it shows nothing.

Main.vue

<template>
    <v-container fluid fill-height>
        <v-layout align-center justify-center column>
            <v-expansion-panels class="list">
                <v-expansion-panel>
                    <v-expansion-panel-header @click="redrawChart">Top 10 Genres</v-expansion panel-header>
                    <v-expansion-panel-content v-show="chartDraw">
                        <Genres :loaded="loaded" :chart-data="genresChart"></Genres>
                    </v-expansion-panel-content>
                </v-expansion-panel>
            </v-expansion-panels>
            <v-list rounded class="list">
                <v-list-item-group v-model="item" color="primary">
                    <v-list-item v-for="(item, i) in data" :key="i">
                        <v-list-item-avatar tile>
                            <img :src="item.album.images[item.album.images.length -1].url" :alt="item.album.images[item.album.images.length -1].value"/>
                        </v-list-item-avatar>
                        <v-list-item-content>
                            <v-list-item-title v-text="item.name"></v-list-item-title>
                            <v-list-item-subtitle>
                                <ArtistsList class="artists" :artists="item.artists"></ArtistsList>
                            </v-list-item-subtitle>
                        </v-list-item-content>
                        <v-list-item-action @click="play(item)">
                            <font-awesome-icon :icon="['fas', 'play']" size="lg" pull="right"></font-awesome-icon>
                        </v-list-item-action>
                    </v-list-item>
                </v-list-item-group>
            </v-list>
        </v-layout>
    </v-container>
</template>

<script>

    import handle from "../assets/js/Vue/home/handle"
    import ArtistsList from "../components/ArtistsList"
    import Genres from "../components/Genres"

    export default {
        created: function () {
            handle.init(this);
        },
        components: {
            ArtistsList,
            Genres
        },
        data: () => ({
            item: 1,
            audio: null,
            data: [],
            artists: [],
            genres: [],
            loaded: false,
            chartDraw: false,
            genresChart: {
                labels: [],
                datasets: [{
                    backgroundColor: [],
                    borderWidth: 0,
                    data: []
                }]
            }
        }),
        methods: {
            play: function (arg){
                if (this.audio !== null){
                    this.audio.pause();
                }
                this.audio = new Audio(arg.preview_url);
                this.audio.play();
            },
            redrawChart: function () {
                this.chartDraw = !this.chartDraw;
            }
        }

    }
</script>

Genres.vue

<template>
    <div class="container">
        <doughnut-chart v-if="loaded" :chartdata="chartData" :options="options"></doughnut-chart>
    </div>
</template>

<script>

    import doughnutChart from "./charts/Doughnut"

    export default {
        name: "Genres",
        components: {doughnutChart},
        props: ["loaded", "chartData"],
        data: () => ({
            options: {responsive: true, maintainAspectRatio: false}
        })
    }
</script>

Doughnut.vue

<script>

    import { Doughnut } from 'vue-chartjs'

    export default {
        name: "Doughnut",
        extends: Doughnut,
        props: {
            chartdata: {
                type: Object,
                default: null
            },
            options: {
                type: Object,
                default: null
            }
        },
        mounted () {
            this.renderChart(this.chartdata, this.options)
        }
    }
</script>

So you like you can see I added the function redrawChart to force the chart to be redrawn.
The first it work, but when you hide it and try to show it again it won't show anymore.

Should always show the chart like this:

Environment

• vue.js version: 4.0.4
• vue-chart.js version: 3.4.2
• npm version: 6.4.1

[apertureless]

#399 #90 #235 #157 #528