Vue Js Add timestamp when the checkbox is checked

<html>

<body>

<div id="app">
        <h3>Vue Js Add timestamp when checkbox is checked</h3>
        <label>
            <input type="checkbox" v-model="checkboxes[0].isChecked" @change="handleCheckboxChange(0)">
            {{ checkboxes[0].label }}
        </label>
        <p v-if="checkboxes[0].isChecked">Checkbox 1 was checked at: {{ checkboxes[0].timestamp }}</p>

<label>
            <input type="checkbox" v-model="checkboxes[1].isChecked" @change="handleCheckboxChange(1)">
            {{ checkboxes[1].label }}
        </label>
        <p v-if="checkboxes[1].isChecked">Checkbox 2 was checked at: {{ checkboxes[1].timestamp }}</p>
    </div>

h3 {
            margin-bottom: 20px;
        }

/* Styling for checkboxes */
        input[type="checkbox"] {
            margin-right: 5px;
            appearance: none;
            -webkit-appearance: none;
            -moz-appearance: none;
            width: 14px;
            height: 14px;
            border: 1px solid #999;
            border-radius: 2px;
            outline: none;
            vertical-align: middle;
            position: relative;
            transition: background-color 0.3s ease;
        }

input[type="checkbox"]::before {
            content: "";
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            width: 6px;
            height: 6px;
            background-color: transparent;
            border-radius: 1px;
            border: 2px solid #fff;
            transition: background-color 0.3s ease;
        }

input[type="checkbox"]:checked {
            background-color: #2196f3;
            border-color: #2196f3;
        }

input[type="checkbox"]:checked::before {
            background-color: #fff;
        }

/* Styling for labels */
        label {
            display: block;
            margin-bottom: 10px;
            color: #333;
            cursor: pointer;
        }

/* Styling for checked checkboxes */
        input[type="checkbox"]:checked+span {
            font-weight: bold;
        }

/* Styling for timestamps */
        p {
            margin-top: 5px;
            color: #888;
        }
    </style>
</body>

</html>