cookie consent it keeps showing repeadetdly on app refresh i am using vue3

[PraiseSinkamba]

Here is my config

import { type CookieConsentConfig,type CookieValue,getUserPreferences } from 'vanilla-cookieconsent' import apiClient from '@/api/client' const config: CookieConsentConfig = { revision: 1, // Cookie settings cookie: { name: 'consent_prefs', expiresAfterDays: 365, }, // GUI options guiOptions: { consentModal: { layout: 'cloud inline', position: 'bottom center', equalWeightButtons: true, flipButtons: false }, preferencesModal: { layout: 'box', equalWeightButtons: true, flipButtons: false }, }, // Event handlers onFirstConsent: ({ cookie }) => { recordConsentToBackend(cookie); console.log('First consent recorded'); }, onConsent: ({ cookie }) => { recordConsentToBackend(cookie); console.log('Consent updated'); }, onChange: ({ cookie }) => { recordConsentToBackend(cookie); console.log('Consent preferences changed'); }, // Categories configuration categories: { necessary: { readOnly: true, enabled: true, }, analytics: { enabled: false, autoClear: { cookies: [ { name: /^(_ga|_gid|_gat)/, }, { name: 'anon_id', } ], }, }, marketing: { enabled: false, }, functional: { enabled: false, } }, language: { default: 'en', translations: { en: { consentModal: { title: 'We Value Your Privacy', description: 'Cars.co.zm uses cookies to enhance your browsing experience, analyze site traffic, and personalize content. By clicking "Accept All", you consent to our use of cookies. You can manage your preferences or reject non-essential cookies by clicking "Manage Preferences".', acceptAllBtn: 'Accept All', acceptNecessaryBtn: 'Reject All', showPreferencesBtn: 'Manage Preferences', closeIconLabel: 'Reject all and close', footer: `  <a href="/privacy-policy" target="_blank">Privacy Policy</a>  <a href="/terms-of-service" target="_blank">Terms of Service</a>  `, }, preferencesModal: { title: 'Privacy Preferences', acceptAllBtn: 'Accept All', acceptNecessaryBtn: 'Reject All', savePreferencesBtn: 'Save Preferences', closeIconLabel: 'Close', sections: [ { title: 'Cookie Usage on App', description: 'This app uses cookies and similar technologies to provide, maintain, and improve our services. We also use them to track your interactions with our site and to personalize your experience. You can customize your cookie preferences below. For more details, please refer to our <a href="/privacy-policy" class="cc__link">Privacy Policy</a>.', }, { title: 'Strictly Necessary Cookies', description: 'These cookies are essential for the proper functioning of our website. They enable core functionality such as security, network management, and account access. You cannot disable these cookies as the website cannot function properly without them.', linkedCategory: 'necessary', }, { title: 'Analytics Cookies', description: 'These cookies collect information about how you use our website, which pages you visit, and how you interact with our content. All information these cookies collect is aggregated and anonymous. If you do not allow these cookies, we will not know when you have visited our site.', linkedCategory: 'analytics', cookieTable: { headers: { name: 'Cookie', domain: 'Domain', desc: 'Description', }, body: [ { name: '_ga, _gid, _gat', domain: '_', desc: 'Google Analytics cookies used to distinguish users and sessions.', }, { name: 'anon_id', domain: 'cars.co.zm', desc: 'Anonymous identifier used to track your activity across sessions for analytics purposes.', }, ], }, }, { title: 'Marketing Cookies', description: 'These cookies are used to track your browsing habits to deliver advertising more relevant to you and your interests. They are also used to limit the number of times you see an advertisement and to help measure the effectiveness of advertising campaigns.', linkedCategory: 'marketing', }, { title: 'Functional Cookies', description: 'These cookies enable enhanced functionality and personalization. They may be set by us or by third-party providers whose services we have added to our pages. If you do not allow these cookies, some or all of these services may not function properly.', linkedCategory: 'functional', }, { title: 'More Information', description: 'For any questions regarding our cookie policy and your choices, please <a class="cc__link" href="/contact">contact us</a>.', }, ], }, }, }, }, }; // Function to record consent to backend async function recordConsentToBackend(cookie: CookieValue) { try { // Access the categories directly from the cookie object const categories = cookie.categories || {} const consentSettings = { analytics: categories.includes('analytics'), marketing: categories.includes('marketing'), functional: categories.includes('functional'), } // Call the backend API to record consent await apiClient.post('/v1/user/consent', consentSettings) } catch (error) { console.error('Failed to record consent to backend:', error); } } export default config;

on the backend i am setting the following cookie i have been changing its value to test which one will keep the banner down, it was simpler but i tried to model it to how the cookie_prefs is when i comment out the api call to update the user cookie prefs

/*cookie key: consent_prefs*/ {"languageCode":"en","consentId":"1e9be62e-63c8-4fc0-bbde-d228482b4902","revision":1,"consentTimestamp":"2025-08-11T18:25:38.996781200Z","lastConsentTimestamp":"2025-08-11T18:25:38.996781200Z","expirationTime":1786461938996,"categories":["necessary","analytics","functional"],"services":{"necessary":[],"analytics":[],"marketing":[],"functional":[]}} 

I need help