setTimeout revert uncopied in vue 3 |

copy-me.vue

<template>
  <button @click="onClick">{{ copied ? "copied" : "copy" }}</button>
</template>

<script>
import { ref, watchEffect } from "vue";
export default {
  setup() {
    const copied = ref(false);

    const onClick = () => (copied.value = true);

    watchEffect(() => {
      if (copied.value) {
        setTimeout(() => {
          copied.value = false;
        }, 2000);
      }
    });

    return { copied, onClick };
  },
};
</script>

<style scoped>
</style>