How to implement such logic in vue without document.querySelector?

Question

Vue.js

How to get rid of document.querySelector, which everyone swears about in vue, but at the same time so that the logic is preserved?
Here is the code
https://codepen.io/Crot/pen/wvMmjZm

Answer 1

Add styles:

.child.red {
  background: red;
}

Let the click handler look like this: @click="n.em = !n.em".
And the class assignment is as follows: :class="{ red: n.em }".

Answer 2

Correctly swear. Make a control that changes the state of the isOn variable further in the style, use a conditional operator, it is in the documentation.