SweetAlert2 Vue Call a function in a tag HTML

Question

I have this code:

html:

<div>
    <p class="w-100" style="margin: 14px 10px;text-align:left;">Cambiar estado</p>
    <select id="status_action" value="" class="swal2-input">
        <option value="" class="optionStatus">Selecciona un estado</option>
        <option value = "Aprobado" class="optionStatus" id="statusAprobado" onclick = "${this.optionValue = "Aprobado"}">Aprobado</option>
        <option value = "Por-documentar" class="optionStatus" id="statusDocumentar" onclick = "${this.optionValue = "Por-documentar"}">Por documentar</option>
        <option value = "Descartado" class="optionStatus" id="statusDescartado" onclick = "${this.optionValue = "Descartado"}">Descartado</option>
        </option>
    </select>
</div>
<div id="reviewersDiv" style="display: none;">
    <p class="w-100" style="margin: 14px 10px;text-align:left;">Revisores</p>
    <select id="reviewer_id" value="" class="swal2-input"  onchange="${this.settingEvents()}">
    <option value="">Selecciona un revisor</option>                 
    ${this.usersReviewer.map(
        (user) => (
            `<option value="${user.id}">
                ${user.name + " - " + user.role_user[0].area_project_name}
            </option>`
        )
    )}
    </select>
</div>

I'm changing the value of my variable optionvalue depending of the option that I click, then validate it to show the other div that I have:

if (this.optionValue.value === "Por-documentar") {
    reviewersDiv.style.display = "block";
} else {
    reviewersDiv.style.display = "none";
}

but it nevers change the value of the variable, how can I do?