[Vuejs]-Why Vue click event works only one time? Click event works one time ana not working any more

I’d be surprised if you didn’t see an error in your browser’s dev console. This is where errors will show up during runtime. The error you should see is:

[Vue warn]: Avoid mutating a prop directly since the value will be overwritten whenever the parent component re-renders. Instead, use a data or computed property based on the prop’s value. Prop being mutated: "isModalActive"

I know this because I ran your code (after fixing some typos/syntax errors)

The error tells us exactly what’s wrong. Props should only be used for one-way data flow, meaning once a component receives a prop, it should not attempt to change the value of the prop.

<CloseIcon
        class="absolute right-5 top-5 w-[30px] h-[30px] text-gray-500 hover:text-red-400 cursor-pointer"
        @click="isModalActive = false"
      />

isModalActive is being mutated right here by being set to false. This is causing your error. To prevent this error, have the parent component (Home.vue) mutate the prop for you. In your case, you actually already have most of the code for this in place. Just change your click event to this:

@click="close"

which will call your close method:

close() {
    this.$emit("close");
},

This method emits the event "close" which your parent component will catch, and in fact you already have your parent component doing this:

<Modal :isModalActive="isModalActive" @close="isModalActive = false">

So for your problem you just need to change your @click as noted above.