How can I wrap to child by parent? (not component) Vue.js

Question

When using Vue I am faced with something different than usual and cannot be overcome. The HTML code and JSFiddle links:

    <div class="box align" id="app" onmouseover="fuchsia(id)" onmouseout='notFuchsia(id)'>
      <div class="line align">
        <div class="y-line align">
            <p>get ur pointer yellow line</p>
        </div>
      </div>
    </div> 
<!--JS and CSS in JSFiddle links. Please look at --> 

Case 1 (Pure JS + HTML + CSS): https://jsfiddle.net/mcezgsa7/32/

Case 2 (Vue.js + HTML + CSS): https://jsfiddle.net/pa2xmyju/12/

I want my code to work like the case 1, but I'm using Vue.js. So, I think I can explain the problem.

Answer 1

Well, I did a little bit of rewriting of your code. Notice that I removed your methods, added property hover to data object and added a css class active , which is added to the element when mouse is hovered over it.

https://jsfiddle.net/v0komLf9/