How to save button states when navigating through vue SPA pages?

Question

Vue.js

I save the element in localstorage when the button is clicked, while I immediately hide the add button, and show the delete button. The problem is that when I go to another page where I display the added elements from localstorage, the element is displayed again with the add button, and when I return to the main page, the add button is again displayed on those elements that were added to localstorage, although they are already in localstorage.
Tell me how to save states when navigating through pages and updating the page.

here is the logic of the card itself

<template>
    <div class="card">
        <h2 class="card__title">{{ character.name }}</h2>
        <div class="card__img">
            <img :src="character.image" alt="image">
        </div>
        <div class="card__action">
            <span>{{ character.gender }}</span>
            <div>
                <div v-if="allowSave" class="card__btn card__btn--favorites" @click ="saveItem"></div>
                <div v-if="allowDelete" class="card__btn card__btn--delete" @click="deleteItem"></div>
            </div>
        </div>
    </div>
</template>

<script>

export default {
    name: 'Card',
    data() {
        return {
            allowDelete: false,
            allowSave: true
        }
    },
    props: {
        character: {
            type: Object,
            required: true
        },
    },
    methods: {
        saveItem() {
            let items = JSON.parse(localStorage.getItem('favorites')) || [];
            items.push(this.character)
            localStorage.setItem('favorites', JSON.stringify(items))
            this.allowSave = false
            this.allowDelete = true
        },
        deleteItem() {
            let items = JSON.parse(localStorage.getItem('favorites'))
            items = items.filter(character => character.name !== this.character.name)
            localStorage.setItem('favorites', JSON.stringify(items))
            this.allowDelete = false
            this.allowSave = true
        },
    }
}

and on the added card, only the delete button is needed

<template>
  <div class="favorites">
    <div class="favorites__inner">
        <Card v-for="character in favorites" :key="character.id" :character="character"/>
    </div>
  </div>
</template>

<script>
import Card from "../components/Card";

export default {
    name: 'Favorites',
    components: {
        Card
    },
    data() {
        return {
            favorites: [],
        }
    },
    methods: {
        fetchFavorites() {
            this.favorites = JSON.parse(localStorage.getItem('favorites'))
        }
    },
    mounted() {
        this.fetchFavorites()
    }
}

Answer 1

Right here

return {
           // Вот тут проверяйте наличие данных в localStorage и устанавливайте значения на их основе
            allowDelete: false,
            allowSave: true
        }

Something like this:

data() {
        const isSaved = 
          !! JSON.parse(localStorage.getItem('favorites') || '[]')
          .find(character => character.name !== this.character.name)

        return {
            allowDelete: isSaved,
            allowSave: !isSaved,
        }
    },