Detect radio input getting unchecked (by clicking another radio input) in Vue - vuejs2

Question

I want to give my label a border when the radio input is selected but I can only detect when the radio input is being activated. I know it's possible to do this in CSS with some tricks but I want to do it through Javascript.
<fieldset>
<label>
<input type="radio" name="test" #change="someMethod">
test
</label>
<label>
<input type="radio" name="test" #change="someMethod">
test
</label>
</fieldset>
methods: {
someMethod () {
console.log('something')
}
}
I was hoping to call the someMethod method when the input state would change between checked and unchcked, but this change is only called when the input is clicked (checked).
https://jsfiddle.net/alucardu/qhbpg2yj/1/

Answer 1

Use $refs to check all the radio inputs and use an array to store the previous state, then we can manage to do it:
new Vue({
el: '#app',
data: {
message: 'Hello Vue.js!',
previous_refs:[],
},
methods:{
someMethod(){
for(const key in this.$refs){
if(this.previous_refs[key]!==undefined &&
this.previous_refs[key].checked===true &&
this.$refs[key].checked===false){
console.log(this.$refs[key].id+' un-checked, do something');
}
if(this.$refs[key].checked===true){
console.log(this.$refs[key].id+' checked, do something');
}
if(this.previous_refs[key]===undefined){
this.previous_refs[key]={checked:this.$refs[key].checked};
}
else{
this.previous_refs[key].checked=this.$refs[key].checked;
}
}
},
}
})
Please check https://jsfiddle.net/sLw4e0p8/92/ to see details.

Answer 2

Managed to do it through CSS: https://jsfiddle.net/alucardu/qhbpg2yj/7/
Trick was adding a before to the checked input:
label {
display: flex;
position: relative;
input:checked {
&::before {
content: '';
position: absolute;
width: 100%;
height: 100%;
border: 1px solid blue;
}
}
}