Change inline styles dynamically on hover over container?

Question

Vue.js

Hello.
There is a container with elements, you need to update the inline styles for the elements when hovering over it.

section.about-fs(@mousemove="")
      div.about-rhombuse__item.about-rhombuse__anim(
        v-for="(anim, index) in 5"
        :class="'about-rhombuse__anim_' + (index + 1)"
        :style=""
        )
      div.content-wrap
        div.about-rhombuse__item.about-rhombuse__anim(
          v-for="(anim, index) in 5"
          :class="'about-rhombuse__anim_' + (index + 6)"
          :style=""
          )

Here's what the code looks like, removed everything from :style and from mousemove.
created an object with styles, then made a computed property and threw all the changes into :style - the result is 0

Answer 1

own:

section.about-fs(@mousemove="rhombAnim")
      div.about-rhombuse__item.about-rhombuse__anim(
        v-for="(anim, index) in 5"
        :class="'about-rhombuse__anim_' + (index + 1)"
        :style="rhombValue"
        )
      div.content-wrap
        div.about-rhombuse__item.about-rhombuse__anim(
          v-for="(anim, index) in 5"
          :class="'about-rhombuse__anim_' + (index + 6)"
          :style="rhombValue"
          )

data() {
    return {
      rhombValue: {}
    }
  },

methods: {
    rhombAnim(e) {
      const pageX = e.clientX,
        pageY = e.clientY
      this.rhombValue = {
        transform: "rotate(90deg) translateX(" + pageX/60 + "%) translateY(" + pageY/45 + "%)"
      }
    }
  }