Vue - problem z wyborem elementu oraz localstorage

Posiadam button który po klilknieciu przekazuje obiekt i zapisuje go w localstorage

<button v-on:click="persist($event, meal.idMeal)" :id="meal.idMeal"> ss</button>

ORAZ METODA zapisana w methods

  persist(e, id) {


var favorites = JSON.parse(localStorage.getItem('favorites')) || [];

favorites.forEach(function(favorite) {
  document.getElementById(favorite).className = 'fav';
});

       var id = id,
      item = e.target,
      index = favorites.indexOf(id);

  if (!id) return;

  if (index == -1) {
    favorites.push(id);
    item.className = 'fav';
 
  } else {
    favorites.splice(index, 1);
    item.className = '';
  }

  localStorage.setItem('favorites', JSON.stringify(favorites));
  

    },

Posiadam również pętle taką, ktora pobiera mi z localstorage dane z tablicy i wypluwa obiekt:

 <li  v-for="ss in favourit"    > 
  
   {{ss.idMeal}}
    <img v-bind:src="ss.strMealThumb" />
  </li>

I metoda zapisana w computed

 favourit() {
  
       var favi = JSON.parse(localStorage.getItem("favorites"));
    

       console.log("FAV")
       let tys = [];
     
       if (favi !== null) { 
        return this.meals.filter(meal => {
           if (favi.includes(meal.idMeal)) {
            return meal
           }
        
      }) 
       }

    },

Pytanie dlaczego to działa tylko po odświeżeniu tzn click zapisuje Od razu w localstorage ale petle dopiero aktualizuje się po odświezeniu strony.

2. Mam petle for, która mi pokazuje np 5 elementów: Poniżej jest templatka ukryta ifem. Jak zrobić, żeby po kliknięciu w np 2 div ta templatka wskoczyła pod niego? To tez jest robione w VUe.
   ( Problem jest taki, że mam jakieś dane z jsona i po kliknieciu w obrazek ma mieć tą templatke poniżej z jego opisem, galerią zdjęc, linkami itd). Koniecznie musi być pod klikniętym elementem nie pod spodem.) Dane już mam ogarniete i pobieram tylko nie wiem jak to ogarnąć pod klikniętym elementem.

v-for="car in  filtered"

<div> </div>
<div> </div>
<div> </div>
<div> </div>
<div> </div>

<template> </template>

w metodach jest zapis do localstorage, ale odczyt z computed, bo inaczej mi w ogóle nie działa.

Możesz przechowywać kopię ulubionych w data i wypełniać ją tym, co jest w localStorage w mounted(). Wywołanie v-for przypiąć do tej kopii, a podczas operacji dodawania/usuwania/edycji dbać o synchronizację z tym, co jest w localStorage.

Druga opcja to przeniesienie pobierania kolekcji do computed - przypinanie v-for do danych zwracanych przez funkcję w methods nie ma sensu, bo tracisz reaktywność - funkcja wykonuje się tylko przy renderowaniu widoku.

Nota bene zapis/odczyt z localStorage bym wyniósł do osobnego modułu.