// lepsi pres ref() jinak je to docela slozite, ale jde to ...

<script setup>
import { reactive, watchEffect } from 'vue';

const state = reactive([1, 2, 3]);

// Uchováváme předchozí stav
let previousState = [...state];

watchEffect((onInvalidate) => {
  // Ukládáme aktuální stav jako starý, než je efekt invalidován
  const oldState = [...previousState];
  
  onInvalidate(() => {
    const newState = [...state]; // Získání nové hodnoty při invalidaci efektu
    console.log('State changed from', oldState, 'to', newState);
    
    // Aktualizujeme previousState pro další invalidaci
    previousState = [...state];
  });

  // Nutíme efekt ke sledování pole
  state.forEach(item => item);
});

setTimeout(() => {
  state.push(500);
}, 1000);
</script>

<template>
  {{ state }}
</template>