Estoy tratando de configurar un botón que cambia un valor de datos en Vue pero también lo tengo configurado usando localStorage inicialmente. De esta manera puedo hacer que mantenga el estado anterior en el que estaba antes de actualizar la página. A continuación se muestra el código que estoy usando y puedo hacer que funcione, pero sé que sería preferible usar la sección calculada, pero no he podido hacer que funcione correctamente.

¿Alguien sabría lo que está yendo mal?

Mi botón se activa con el método de prueba y la variable en cuestión es isGrid.

 export default { data() { return { option: 'default', } }, components: { FileUploader, }, mixins: [ visibilitiesMixin, settingsMixin ], props: { vehicleId: { type: Number, required: true, default: null, } }, computed: { ...mapState([ 'isLoading', 'images', 'fallbackImageChecks', 'selectedImages' ]), isGrid: { get() { return localStorage.getItem('isGrid'); }, }, imagesVModel: { get() { return this.images; }, set(images) { this.setImages(images); } }, selectedImagesVModel: { get() { return this.selectedImages; }, set(images) { this.setSelectedImages(images); } }, removeBgEnabled() { return this.setting('nexus_integration_removebg_enabled') === 'enabled'; }, }, mounted() { this.loadImages(this.vehicleId); }, methods: { testing() { if (this.isGrid === 'false' || this.isGrid === false) { localStorage.setItem('isGrid', true); this.isGrid = true; console.log(this.isGrid); console.log(localStorage.getItem('isGrid')); } else { localStorage.setItem('isGrid', false); this.isGrid = false; console.log('b'); console.log(this.isGrid); console.log(localStorage.getItem('isGrid')); } }, }