Save multiple Value as array to a cookie in Vue Cookies

Question

I want to save some Favourited Plants to cookies in vue. I'm using VueCookies but instead adding unlisted id it replaces it, how do I make it so it always add new Id as new Index like "id1,id2" everytime I press button

The values of the cookies set

here the code

 <template>
    <div>
        <h3
            class="text-primary font-montserrat font-semibold text-xl p-5 border-2 border-yellow-300"
        >
            {{ Payload["name"] }}
        </h3>
        <p class="text-md text-primary font-montserrat pl-5">
            Common name : {{ Payload["common_name"] }}
        </p>
        <div class="flex p-5 border-2 border-green-300">
            <div class="border-2 border-red-300">
                <img
                    src="https://pbs.twimg.com/profile_images/1289815343892819969/zIk4dt2E_400x400.jpg"
                    class="w-[200px] h-[200px]"
                />
            </div>
            <div
                class="text-primary font-montserrat text-sm p-5 ml-[10%] border-2 border-blue-300"
            >
                <p>Difficulty : {{ Payload["difficulty"] }}</p>
                <p>Causes : {{ Payload["causes"] }}</p>
                <div class="mt-10">
                    <div v-if="isFavorite">
                        <button
                            @click="toggleFav(Payload['id'])"
                            class="btn btn-outline btn-accent btn-active"
                        >
                            <svg
                                xmlns="http://www.w3.org/2000/svg"
                                height="1em"
                                viewBox="0 0 512 512"
                                class="fill-primary"
                            >
                                <path
                                    d="M47.6 300.4L228.3 469.1c7.5 7 17.4 10.9 27.7 10.9s20.2-3.9 27.7-10.9L464.4 300.4c30.4-28.3 47.6-68 47.6-109.5v-5.8c0-69.9-50.5-129.5-119.4-141C347 36.5 300.6 51.4 268 84L256 96 244 84c-32.6-32.6-79-47.5-124.6-39.9C50.5 55.6 0 115.2 0 185.1v5.8c0 41.5 17.2 81.2 47.6 109.5z"
                                />
                            </svg>
                            Favourited
                        </button>
                    </div>
                    <div v-else>
                        <button
                            @click="toggleFav(Payload['id'])"
                            class="btn btn-outline btn-accent"
                        >
                            <svg
                                xmlns="http://www.w3.org/2000/svg"
                                height="1em"
                                viewBox="0 0 512 512"
                                class="fill-accent"
                            >
                                <path
                                    d="M225.8 468.2l-2.5-2.3L48.1 303.2C17.4 274.7 0 234.7 0 192.8v-3.3c0-70.4 50-130.8 119.2-144C158.6 37.9 198.9 47 231 69.6c9 6.4 17.4 13.8 25 22.3c4.2-4.8 8.7-9.2 13.5-13.3c3.7-3.2 7.5-6.2 11.5-9c0 0 0 0 0 0C313.1 47 353.4 37.9 392.8 45.4C462 58.6 512 119.1 512 189.5v3.3c0 41.9-17.4 81.9-48.1 110.4L288.7 465.9l-2.5 2.3c-8.2 7.6-19 11.9-30.2 11.9s-22-4.2-30.2-11.9zM239.1 145c-.4-.3-.7-.7-1-1.1l-17.8-20c0 0-.1-.1-.1-.1c0 0 0 0 0 0c-23.1-25.9-58-37.7-92-31.2C81.6 101.5 48 142.1 48 189.5v3.3c0 28.5 11.9 55.8 32.8 75.2L256 430.7 431.2 268c20.9-19.4 32.8-46.7 32.8-75.2v-3.3c0-47.3-33.6-88-80.1-96.9c-34-6.5-69 5.4-92 31.2c0 0 0 0-.1 .1s0 0-.1 .1l-17.8 20c-.3 .4-.7 .7-1 1.1c-4.5 4.5-10.6 7-16.9 7s-12.4-2.5-16.9-7z"
                                />
                            </svg>
                            Favourite
                        </button>
                    </div>
                </div>
            </div>
        </div>

        <p class="text-md text-primary font-montserrat pl-5">
            Why did it appear ?
        </p>
        <p class="text-primary text-sm p-5">{{ Payload["causes_desc"] }}</p>
        <p class="text-primary text-sm p-5">{{ Payload["body"] }}</p>
    </div>
</template>

<script>
import { onUpdated, ref } from "vue";
import { $ } from "jquery";
import VueCookies from "vue-cookies";
export default {
    props: ["Payload"],
    setup(props) {
        const isFavorite = ref(false);

        // console.log(props.Payload["name"]);
        return { isFavorite };
    },
    methods: {
        toggleFav(id) {
            //Everytime button is clicked, change the value of the isFavorite to manipulate button style
            this.isFavorite = !this.isFavorite;
            //check if it is favorite
            if (this.isFavorite) {
                //set the cookie to id passed
                VueCookies.set("FavId", id);
                // console.log("UID : " + id + " Favourited");
            } else {
                //if the favorite button pressed again it will remove the current id in the cookie
                //without removing all the cookies
                VueCookies.remove("FavId");
                // console.log("UID : " + id + " UnFavorited");
            }
            console.log(VueCookies.get("FavId"));
        },
    },
};
</script>

<style lang="scss" scoped></style>

So how do I add additional Id to the new index as array in cookies instead of replacing the cookies everytime I press the button