Элемент не перерисовывается
Обновляю key элемента, а он не перерисовывается, самое странное, что если прожата F12 (bинспекция страницы) элемент перерисовывается, не понимаю с чем это связано
<template>
<div class="chart-container" >
<div class="form">
<h1>Количество посетителей в зависимости от дат</h1>
<form @submit.prevent="putForm">
<div class="form-row">
<p>Первая дата</p>
<input type="text" placeholder="дд.мм.гггг" v-model="firstDate">
</div>
<div class="form-row">
<p>Вторая дата</p>
<input type="text" placeholder="дд.мм.гггг" v-model="secondDate">
</div>
<div class="form-row">
<p>Минимум посетителей</p>
<input type="number" v-model="minVisitors">
</div>
<div class="form-row">
<p>Максимум посетителей</p>
<input type="number" v-model="maxVisitors">
</div>
<div class="form-row">
<p>Интервал</p>
<input type="number" v-model="interval">
</div>
<div class="form-submit">
<input type="submit" value="Построить" class="custom-button">
<div @click="rerenderChart" class="custom-button">Обновить</div>
</div>
</form>
</div>
<img :src="this.allAnalyticsModels[0].chart"
:key="k">
</div>
</template>
<script>
import {mapActions, mapGetters} from "vuex";
export default {
name: "DateVisitors",
data() {
return {
firstDate: "",
secondDate: "",
minVisitors: null,
maxVisitors: null,
interval: null,
k: 0,
}
},
methods: {
...mapActions(['putAnalyticsModels', 'getAnalyticsModels']),
putForm: function () {
let request = {
"id": this.allAnalyticsModels[0].id,
"first_date": this.firstDate,
"last_date": this.secondDate,
"min_visitors": Number(this.minVisitors),
"max_visitors": Number(this.maxVisitors),
"interval": Number(this.interval),
}
this.putAnalyticsModels(request)
setTimeout(this.rerenderChart,1000)
console.log(this.allAnalyticsModels[0].chart)
},
rerenderChart:function (){
this.k=this.k-1
}
},
computed: {
...mapGetters(['allAnalyticsModels']),
},
async mounted() {
await this.getAnalyticsModels()
},
}