Tengo el accesorio que es una matriz, lo itero en la plantilla e intento administrar el estado de desplazamiento mostrando un elemento adicional cuando ocurre el desplazamiento:

 <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>

El problema viene cuando trato de pasar los datos como prop. Los datos dejan de actualizarse con item.isHover = true y la función de desplazamiento no funciona. Traté de mantener el estado de desplazamiento en una matriz de datos separada (fuera del accesorio en hovers: boolean[] = [] ), pero tampoco funciona (la matriz de estado cambia, pero si no reacciona en el v-if="hovers[i]" .¿Qué puedo hacer para rastrear el estado de desplazamiento y mostrar el elemento adicional durante el desplazamiento y pasar los datos como apoyo?