Unchecked input onClick on body

I have created a drop down menu with an input that I hide and a label, I would like to be able to set the input to unchecked even if I click outside. I tried to implement a logic with just console.log and I notice that my logic is not good as soon as I click on the input it is checked and unchecked as fast which makes that on the user side it does not open at all.

  mounted: function () {
let input = this.$refs.checkboxInput;
let body = document.querySelector("body");

input.addEventListener("click", (e) => {
  e.stopPropagation;
  console.log("listener on input with the onClick");
  if (this.$refs.checkboxInput.checked) {
    console.log("the menu is open");
  }
  body.addEventListener("click", (e) => {
    e.stopPropagation;
    console.log("close");
  });
}); 

},