I have the prop that is array, iterate it in template and try to manage hover state with displaying additional element when hover is happened:

<template>
    <div class="d-flex justify-center" style="height: 100%">
        <div v-for="(item, i) in data" :key="i" class="flex-grow-1 d-flex flex-column" style="height: 100%">
            <div class="px-2" style="height: 100%;">
                <div class="d-flex flex-column-reverse justify-start align-end" style="height: 100%;">
                    <div class="bar"
                        :class="{'bar-active' : item.isActive}"
                        @mouseover="item.isHover = true"
                        @mouseleave="item.isHover = false"
                        :style="`height: ${getBarHeight(item.y)}%`"/>
                    <div class="container">
                        <div v-if="item.isHover || item.isActive" class="label fw-600 fs-12 tc-text-primary">{{getIncomeView(item)}}</div>
                    </div>
                </div>
            </div>
            <div class="container">
                <div class="label content-accent" style="white-space: nowrap;">{{item.x}}</div>
            </div>
        </div>
    </div>
</template>

<script lang="ts">
import { Component, Prop, Vue, Watch } from "vue-property-decorator";
import BarChartModel from "./bar-chart-model";

@Component({
    components: {

    }
})
export default class OverviewChart extends Vue {
    @Prop({default: () => []})
    data!: BarChartModel[];

    hovers: boolean[] = [];

    ...
}
</script>

The problem is coming when I try to pass the data as prop. Data ceases to be updated with item.isHover = true and hover feature doesn't work. I tried to keep the hover state in separate data array (out of the prop in hovers: boolean[] = []), but it also doesn't work (state array is changed, but if hasn't react on the v-if="hovers[i]". What I can do to track the hover state and display the additional element during hover and pass the data as prop?