vue-leaflet (leaflet) trying to reset style of the previous country - leaflet

Question

I'm trying to reset the style of the previous clicked country.
Basically here's what happen:
the maps get a geojson with all countries shapes.
When I hover on a country it will change color and when I hover out it will go back to previous color.
When I click on a country it will change the color (permanent)
If I click on another country it will change the color too but I would like to reset the previous clicked country to the starting style
I think the problem might be related to the way I access the $refs because no matter what I can't use the setStyle. (Or maybe something else has to be done in order to achieve result)
Thanks a lot.
this is my (working) Map component:
It misses the part where I try to achieve the previous clicked country style reset.
<template>
<div class="map-wrap">
<l-map
ref="map"
:options="mapOptions"
:zoom="zoom"
:minZoom="2.5"
:zoomAnimation="true"
:panInsideBounds="true"
:maxBounds="[
[90, 180],
[-90, -180],
]"
:maxBoundsViscosity="1.0"
:maxZoom="2.4"
:center="[47.41322, -1.219482]"
>
<l-tile-layer
url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
layer-type="base"
name="OpenStreetMap"
></l-tile-layer>
<l-geo-json
:visible="true"
:geojson="geojson"
:options="geojsonOpts"
ref="arearef"
/>
</l-map>
</div>
</template>
<script>
import "leaflet";
import {
LMap,
LTileLayer,
LMarker,
LPolygon,
LGeoJson,
} from "#vue-leaflet/vue-leaflet";
export default {
components: {
LMap,
LTileLayer,
LMarker,
LPolygon,
LGeoJson,
},
data() {
return {
zoom: 2,
geojson: null,
mapOptions: {
zoomSnap: 0.5,
preferCanvas: true,
},
clicked: "",
};
},
async created() {
const response = await fetch("/dataset/countries.geojson");
this.geojson = await response.json();
console.log(this.geojson);
},
computed: {
geojsonOpts() {
return {
onEachFeature: (feature, layer) => {
// set each layer style
layer.setStyle({
weight: 1,
color: "#999",
dashArray: "",
fillOpacity: 0.1,
});
let name = feature.properties.NAME;
layer.on("click", () => {
// reset to default style if the clicked layer is already active
if (this.clicked === name) {
layer.setStyle({
weight: 1,
color: "#999",
dashArray: "",
fillOpacity: 0.1,
});
return;
}
// change style to the clicked layer
layer.setStyle({
weight: 1,
color: "#0f0",
dashArray: "",
fillOpacity: 0.1,
});
this.clicked = name;
});
layer.on("mouseover", () => {
// do nothing if the layer is already active
if (this.clicked === name) {
return;
}
//change style on mouse over
layer.setStyle({
weight: 1,
color: "#0f0",
dashArray: "",
fillOpacity: 0.1,
});
});
layer.on("mouseout", () => {
// do nothing if the layer is already active
if (this.clicked === name) {
return;
}
// reset to default style on mouse out
layer.setStyle({
weight: 1,
color: "#999",
dashArray: "",
fillOpacity: 0.1,
});
});
},
};
},
},
};
</script>
<style scoped>
.map-wrap {
width: 100vw;
height: 100vh;
margin: 0;
padding: 0;
top: 0;
bottom: 0;
left: 0;
right: 0;
position: absolute;
}
</style>
and this is a small part of the geojson
{
"type": "FeatureCollection",
"name": "Countries",
"crs": {
"type": "name",
"properties": { "name": "urn:ogc:def:crs:OGC:1.3:CRS84" }
},
"features": [
{
"type": "Feature",
"properties": { "NAME": "Fiji" },
"geometry": {
"type": "MultiPolygon",
"coordinates": [
[
[
[180.0, -16.067132663642447],
[180.0, -16.555216566639196],
[179.364142661964138, -16.801354076946883],
[178.725059362997115, -17.012041674368039],
[178.596838595117134, -16.63915],
[179.0966093629971, -16.433984277547403],
[179.413509362997104, -16.379054277547404],
[180.0, -16.067132663642447]
]
],
[
[
[178.12557, -17.50481],
[178.3736, -17.33992],
[178.71806, -17.62846],
[178.55271, -18.15059],
[177.93266, -18.28799],
[177.38146, -18.16432],
[177.28504, -17.72465],
[177.67087, -17.38114],
[178.12557, -17.50481]
]
],
[
[
[-179.793320109048636, -16.020882256741224],
[-179.917369384765294, -16.501783135649397],
[-180.0, -16.555216566639196],
[-180.0, -16.067132663642447],
[-179.793320109048636, -16.020882256741224]
]
]
]
}
},
...
ps: sorry if I'm not posting a code sandbox but the map tiling was not properly working on it